<template>
    <div class="box">
        <a-row class="top_checkbox" justify="space-between" align="middle" :wrap="false">
            <a-col :span="24">
                <a-row  align="middle" justify="space-between" class="platform">
                    <a-col>
                        <a-row align="middle" >
                            <a-col v-for="(item,index) in accountList" :key="index" @click="accountClick(index)">
                                <div class="platform-item" :class="accountIndex == index ? 'item-border':''">
                                    <img :src="item.image" v-if="item.image" class="img-item"/>
                                    <template v-if="item.value == '平台总览'">
                                       <img :src="$utils.staticPath + 'images/workAi/datacenter/overview.png'" class="img-item"/>
                                    </template>
                                    {{item.value}}
                                </div>
                            </a-col>
                        </a-row>
                    </a-col>
                    <a-col>
                        <a-row align="middle" :gutter="[16,16]">
                            <a-col class="notice-text">{{tipText}}</a-col>
                            <a-col v-if="accountIndex!=0">
                                <a-input-search
                                v-model:value="accountNum"
                                placeholder="搜索账号"
                                style="width: 200px"
                                @search="onAccountNumSearch"
                                />
                            </a-col>
                        </a-row>
                    </a-col>
                </a-row>
            </a-col>
        </a-row>
        <a-row  class="data-top-list">
            <div class="top_list_left">
                <div class="left_top ">
                    <div class="cart_item" v-for="(item,index) in dataTopListFilter.leftList.top" :key="index">
                        <div class="platform-num" >
                                    <div class="content_num_box">
                                        <div class="platform-img">
                                            <img :src="item.image" style="width:100%;height:100%"/>
                                        </div>
                                    </div>
                                    <div class="content_num_bottom">
                                        <div class="platform-number">{{item.count}}</div>
                                        <div class="platform-text">{{item.name}}</div>
                                    </div>
                        </div>
                    </div>
                </div>

                <div style="background-color: #fafafa; height: 1px;">
                </div>

                <div class="left_bottom" >
            <div class="cart_item"  v-for="(item,index) in dataTopListFilter.leftList.bottom" :key="index">
                <div class="platform-num">
                            <div class="content_num_box">
                                <div class="platform-img">
                                    <img :src="item.image" style="width:100%;height:100%"/>
                                </div>
                            </div>
                            <div class="content_num_bottom">
                                <div class="platform-number">{{item.count}}</div>
                                <div class="platform-text">{{item.name}}  </div>
                            </div>
                </div>
            </div>
                </div>


            </div>

            <!-- v-if="false" -->
            <div class="top_list_right" v-if="accountList?.[accountIndex]?.value == '平台总览'">
                <div class="left_top ">
                    <div class="cart_item" v-for="(item,index) in dataTopListFilter.rightList" :key="index">
                        <div class="platform-num">
                            <div class="content_num_bottom_right">
                                <div class="platform-number">{{item.count}}</div>
                                <div class="platform-text">{{item.name}} 
                                    <span>
                                        <img :src="item.image" style="width:25px;height:25px;" />
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>


        </a-row>
        <!-- 视频数据趋势 -->
        <a-row  justify="space-between" align="middle" class="card video-data-trend" :wrap="false" >
            <a-col >
                <a-row align="middle" :gutter="[16,16]">
                    <a-col class="text-title text-size">
                        视频数据趋势
                    </a-col>
                </a-row>
            </a-col>
            <a-col>
                <a-row :gutter="[26,16]">
                    <a-col>
                        <a-row>
                            <a-col class="critical-data">
                                <a-row justify="space-around">
                                    <a-col class="critical-data-item " :class="item.key == dayKey ? 'data-item-bg':''" v-for="item in tabDayList" :key="item.key" @click="dayClick(item)">{{item.label}}</a-col>
                                </a-row>
                            </a-col>
                        </a-row>
                    </a-col>
                    <a-col>
                        <a-space>
                            <a-range-picker v-model:value="dataTrendsAccountDay" @change="dayChange" />
                            <a-input-search
                            v-if="accountIndex!=0"
                            v-model:value="dataTrendsAccountNum"
                            placeholder="搜索账号"
                            style="width: 200px"
                            @search="onDataTrendsAccountNumSearch"
                            />
                        </a-space>
                    </a-col>
                </a-row>
            </a-col>
        </a-row>

        <div class="data_trend card">

            <div class="data_trend_main">
                <VideoDataTrends ref="VideoDataTrendsRef" :videoDataTrend="dataTrendList" @tabChange="videoDataChange" />
           
                <div style="padding: 16px;">
                    <p style="font-weight: bold; font-size: 14px;">
                        {{showDate}}
                    </p>
                    <div style="width: 100%; height: 500px;  background: #fff" id="trendsChart"  />
                </div>
            </div>
        </div>
        <a-row :gutter="[16,16]" v-show="accountIndex == 0">
            <a-col :span="12" style="margin-top:20px">
                <div class="card" style="height: 100%">
                    <a-row>
                        <a-col :span="24">
                            <a-row justify="space-between">
                                <a-col class="honourable-mentions text-title">当前平台账号授权·数据实时</a-col>
                            </a-row>
                        </a-col>
                        <a-col :span="24" class="engagement-metrics">
                            <div id="accountAuthorization" />
                        </a-col>
                    </a-row>
                </div>
            </a-col>
            <a-col :span="12" style="margin-top:20px">
                <div class="card" style="height: 100%;">
                    <a-row >
                        <a-col :span="24">
                            <a-row justify="space-between">
                                <a-col class="honourable-mentions text-title">当前平台发布·数据实时</a-col>
                            </a-row>
                        </a-col>
                        <a-col :span="24" class="engagement-metrics">
                            <div id="dataNew" />
                        </a-col>
                    </a-row>
                </div>
            </a-col>
        </a-row>

        <a-row :gutter="[16,16]">
            <a-col :span="12" style="margin-top:20px">
                <div class="card" style="height: 100%;">
                    <a-row align="middle" >
                        <a-col :span="24">
                            <a-row justify="space-between" align="middle">
                                <a-col :span="12" class="honourable-mentions text-title">表现优异作品 TOP 20</a-col>
                                <a-col>
                                    <a-col class="critical-data" >
                                    <a-row justify="space-around">
                                            <a-col class="critical-data-item " v-for="item in filmDayList" :key="item.key" @click="filmDayClick(item)" :class="filmDayKey == item.key ? 'data-item-bg' : ''">{{ item.label }}</a-col>
                                        </a-row>
                                    </a-col>
                                </a-col>
                            </a-row>
                        </a-col>
                        <a-col :span="24" class="metric" style="display: flex;margin: 20px 0">
                            <a-row :gutter="[40, 0]" class="critical-engagement-data" style="justify-content: start; margin-left: 10px;">
                                <a-col class="critical-engagement-data-item" v-for="item in topFimTypeList" :key="item.key" @click="topFimTypeClick(item)" :class="item.key == topFimTypeKey ? 'data-item-bg':'' ">{{ item.label }}</a-col>
                            </a-row>
                        </a-col>
                        <a-col :span="24" v-if="filmVideoTopList.length" class="hide-scroller-bar" style="height: 650px;overflow: hidden auto;">
                            <HonourableMentionList :list="filmVideoTopList"  />
                        </a-col>
                        <a-row justify="center" v-else style="width: 100%;margin: 200px 0">
                                <a-col :span="24" style="text-align:center">
                                    <img src="../../../common/image/no_data.png" >
                                </a-col>
                                <a-col :span="24" style="text-align:center">
                                    暂无数据
                                </a-col>
                            </a-row>
                    </a-row>
                </div>
            </a-col>
            <a-col :span="12" style="margin-top:20px">
                <div class="card" style="height: 100%;">
                    <a-row >
                        <a-col :span="24">
                            <a-row justify="space-between" align="middle">
                                <a-col :span="12" class="honourable-mentions text-title">表现优异账号 TOP 20</a-col>
                                <a-col>
                                    <a-col class="critical-data" >
                                        <a-row justify="space-around">
                                            <a-col class="critical-data-item" v-for="item in filmDayList" :key="item.key" @click="accountKeyClick(item)" :class="accountKey == item.key ? 'data-item-bg' : ''">{{ item.label }}</a-col>
                                        </a-row>
                                    </a-col>
                                </a-col>
                            </a-row>
                        </a-col>
                        <a-col :span="24" class="metric" style="display: flex;margin: 20px 0">
                            <a-row :gutter="[40, 0]" class="critical-engagement-data" style="justify-content: start; margin-left: 10px;">
                                <a-col class="critical-engagement-data-item" v-for="item in topFimTypeList" :key="item.key" @click="topAccountClick(item)" :class="item.key == topAccountKey ? 'data-item-bg':'' ">{{ item.label }}</a-col>
                            </a-row>
                        </a-col>
                        <div id="excellentPerformingAccount" class="hide-scroller-bar"   v-show="accountVideoTop.length >0"/>
                        <a-row justify="center" style="width: 100%;margin:  200px 0"  v-if="accountVideoTop.length<=0">
                            <a-col :span="24" style="text-align:center">
                                <img src="../../../common/image/no_data.png" >
                            </a-col>
                            <a-col :span="24" style="text-align:center">
                                暂无数据
                            </a-col>
                        </a-row>
                    </a-row>
                </div>
            </a-col>
        </a-row>

        <a-row class="detail-data card" >
            <a-col :span="24" class="text-title text-size">详细数据</a-col>
            <a-col :span="24" class="metric" style="display: flex;justify-content:start;margin: 20px 0">
                <a-row :gutter="[40, 0]" class="critical-engagement-data" style="justify-content: start; margin-left: 10px;">
                    <a-col class="critical-engagement-data-item " v-for="item in dataDate" :class="item.key == dataDateKey ? 'data-item-bg':''" @click="dataDateClick(item)" :key="item.key">{{item.label}}</a-col>
                </a-row>
            </a-col>
            <a-col :span="24">
                <a-row :gutter="[16,16]" align="middle"  justify="space-between">
                    <a-col  >
                        <a-col  class="detail-data-dec">
                            <div v-if="dataDateKey==1">
                                通过系统发布出去的视频，在 <span style="color:#1783ff">{{startTime}}</span>至<span style="color:#1783ff">{{endTime}}</span>期间内每日产生新增的视频数据
                            </div>
                            <div v-if="dataDateKey==2">
                                在 <span style="color:#1783ff">{{startTime}}</span>至<span style="color:#1783ff">{{endTime}}</span> 期间所发布的视频，截止至昨日的视频数据
                            </div>
                            <div v-if="dataDateKey==3">
                                截止昨日，每个平台账号数据汇总
                            </div>
                            <div v-if="dataDateKey==4">
                                截止昨日，每个平台数据汇总
                            </div>
                        </a-col>
                    </a-col>
                    <a-col style="margin-bottom: 20px;">
                        <a-row :gutter="[16,16]">
                            <a-col class="detail-data-select" v-if="false">
                                <a-row justify="space-around detail-data-border">
                                    <a-col class="detail-data-item detail-data-bg">所有</a-col>
                                    <a-col class="detail-data-item">短视频</a-col>
                                    <a-col class="detail-data-item">图文</a-col>
                                </a-row>
                            </a-col>
                            <a-col v-if="dataDateKey==2||dataDateKey==3">
                                <a-input-search
                                    v-model:value="detailText"
                                    placeholder="账号搜索"
                                    style="width: 200px"
                                    @search="onDetailSearch"
                                    />
                            </a-col>
                            <a-col class="detail-data-select" v-if="dataDateKey==1||dataDateKey==2">
                                <a-row justify="space-around detail-data-border">
                                    <a-col class="detail-data-item" v-for="item in tabDayList" :class="item.key == dataDateTimeKey? 'detail-data-bg': ''" @click="dataDateTimeClick(item)" :key="item.key">{{item.label}}</a-col>
                                </a-row>
                            </a-col>
                            <a-col v-if="dataDateKey==1||dataDateKey==2">
                                <a-range-picker v-model:value="dataDateTimDay" @change="dataDateChange"/>
                            </a-col>
                        </a-row>
                    </a-col>
                 
                </a-row>
            </a-col>
      
            <a-col :span="24">
                <a-table 
                :dataSource="dataDetailSource" 
                :columns="detailColumns" 
                :loading="detailSourceLoading"
                :pagination="detailSourcePagination"
                @change="handleTableChange"
                rowKey="id">
                    <template #bodyCell="{ column, record }">
                        <template v-if="column.dataIndex === 'source_txt'">
                            <a-row align="middle"  :gutter="[16,16]" v-if="dataDateKey!=4">
                                <a-col>
                                    <img style="width:40px;height: 40px" :src="record.platform_account?.platform?.image" />
                                </a-col>
                                <a-col>
                                {{ record.platform_account?.nickname }}
                                </a-col>
                            </a-row>
                            <a-row align="middle"  :gutter="[16,16]" v-else>
                                <a-col>
                                    <img style="width:50px;height: 50px" :src="record.platformInfo?.image" />
                                </a-col>
                                <a-col>
                                {{ record.platformInfo?.value }}
                                </a-col>
                            </a-row>
                        </template>
                        <template v-if="column.dataIndex === 'video_id'">
                            <a-row   class="video_box" >
                                <a-col>
                                    <img class="video_item" :src="record.film_video?.multimedia?.cover_url"  @click="viewVideoClick(record)">
                                </a-col>
                                <a-col style="margin-left: 10px">
                                    <div>{{ record.film_video?.multimedia?.material_name }}</div>
                                    <div class="video_date" >{{record.film_video?.multimedia?.publish_time}}</div>
                                </a-col>
                            </a-row>
                        </template>
                    </template>
                </a-table>
            </a-col>
        </a-row>

        
        <!-- 视频预览 -->
        <viewVideo ref="viewVideoRef" :scriptExport="true" /> 
    </div>
</template>

<script setup>
import { ref, computed, watch, nextTick, onMounted,onUnmounted} from "vue";
import { SearchOutlined } from '@ant-design/icons-vue';
import { Chart } from '@antv/g2';
import request from "@/common/utils/request";
import utils from "@/common/utils/utils.js";
import VideoDataTrends from "./modules/videoDataTrends.vue"
import HonourableMentionList from "./modules/honourableMentionList.vue"
import dayjs from "dayjs";
import { Empty } from 'ant-design-vue';
import {meowDateDiff} from '@/common/utils/atherUtils.js'
// 视频预览组件
import viewVideo from "@/views/shotstack/components/dialogComponent/viewVideo.vue";
const viewVideoRef = ref(null);

const  simpleImage = Empty.PRESENTED_IMAGE_SIMPLE

const VideoDataTrendsRef = ref()

// 图表集合
const chart ={}

// 获取发布成片平台下拉列表
const accountList=ref([])
const tipText = ref('')
const accountIndex =ref(0)

const dataTopList = ref([])

const accountNum=ref('')

// 视频数据趋势搜索
const dataTrendsAccountNum = ref('')
const dataTrendList = ref([])
const dayKey = ref(0)
const dataTrendsAccountDay=ref([])

  // 获取当前日期
  const endDate = dayjs();
  // 计算 7 天前的日期
  const startDate = ref(endDate.subtract(7, 'day')); 

// 日期选择
const tabDayList = ref([
    {
        label:'近7天',
        key:0
    },
    {
        label:'近30天',
        key:1
    },
    {
        label:'自定义',
        key:2
    }
])

const filmDayList =ref([
    {
        label:'近7天',
        key:0
    },
    {
        label:'近30天',
        key:1
    },
    {
        label:'近90天',
        key:2
    }
])

const filmDayKey=ref(0)
const filmDayTime=ref(
    [startDate.value, endDate]
)

const accountKey =ref(0)

const topFimTypeList=ref(
    [
        {
            label:'播放数',
            key:'play'
        },
        {
            label:'点赞数',
            key:'like'
        },
        {
            label:'评论数',
            key:'comment'
        },
        {
            label:'分享数',
            key:'share'
        },
    ]
)

const topFimTypeKey =ref('play')
const topAccountKey =ref('play')

const dataDate =ref([
    {
        label:'按日期',
        key:1
    },
    {
        label:'按视频',
        key:2
    },
    {
        label:'按账号',
        key:3
    },
    {
        label:'按平台',
        key:4
    }
])
const dataDateKey =ref(1)

const dataDateTimeKey =ref(0)
const dataDateTimDay=ref([])

const getAccountList = () => {
  request
    .get("/work_ai", "/org/platform/account/shotStackList", {
      filterShow: 1, //是否过滤掉没有对接的平台 1-是 0-不是
    })
    .then((res) => {
        accountList.value = res.result;
        tipText.value = res.tipText
        if(accountList.value.length>0){
            accountList.value.unshift({
                value:'平台总览',
            })
        }
        accountData.value.key = res.result[0].key
        getDataTop()
        getDataTrends()
    });
};
getAccountList();

// 切换平台
const accountClick = (index)=>{
    accountIndex.value = index
    if(index == 0){
        accountNum.value = ''
    }
    dataDateKey.value = 1
    startDate.value = endDate.subtract(7, 'day')
    dataTrendsAccountDay.value =  [startDate.value, endDate];
    dayKey.value = 0
    dataTrendsAccountNum.value = ''
    onAccountNumSearch()
}

const accountData = computed(()=>{
    return accountList.value.find((item,index)=>index==accountIndex.value)
})

// 展示的列表
const dataTopListFilter = computed(() => {
    const is_ptzl = accountList.value?.[accountIndex.value]?.value == '平台总览'
    let left = ['账号粉丝数', '剪辑成片数', '发布视频数', '视频播放数', '点赞数', '评论数', '分享数']
    let right = ['授权账号数', '员工数量']
    if (!is_ptzl) {
        right = []
        left.push('授权账号数','员工数量')
    }

    const leftList = dataTopList.value.filter((item, index) => {
        return left.includes(item.name)
    })
    const rightList = dataTopList.value.filter((item, index) => {
        return right.includes(item.name)
    })
    return {
        leftList: {
            top: leftList.slice(0, 4),
            bottom: leftList.slice(4, 8),
        },
        rightList: rightList || [] 
    }
})

const getDataTop=()=>{
    let params = {
        name: accountNum.value,
        platform: accountData.value.key || ''
    }
    request
    .get("/work_ai", "/user/film/data/top",params)
    .then((res) => {
        console.log(res.result.content, 'res.result.content');
        // 定义要移动到前面的元素名称
        let targetNames =[]
        if(accountIndex.value != 0) {
            targetNames = ['账号粉丝数', '剪辑成片数', '发布视频数'];
        }else{
            targetNames = ['账号粉丝数', '剪辑成片数', '发布视频数'];
        }
        // 存储目标元素
        const targetElements = [];
        // 存储其他元素
        const otherElements = [];

        // 遍历数组，将元素分类到目标元素和其他元素数组中
        res.result.content.forEach(item => {
            if (targetNames.includes(item.name)) {
                targetElements.push(item);
            } else {
                otherElements.push(item);
            }
        });

        // 按照目标名称的顺序对目标元素数组进行排序
        targetElements.sort((a, b) => {
            return targetNames.indexOf(a.name) - targetNames.indexOf(b.name);
        });

        // 合并目标元素数组和其他元素数组
        const newData = [...targetElements, ...otherElements];

        dataTopList.value = newData
        tipText.value = res.result.tip
    });
}

const onAccountNumSearch=()=>{
    if(accountIndex.value == 0){
        getAccountAuthorization()
        getDataNew()
    }
    getDataTrends()
    getDataTop()
   
    getAccountVideoTop()
    getFilmVideoTop()
}
const chartList =ref([]);
const chartNewList =ref([])
const videoDataChange=(data)=>{
    let newList = chartList.value.map(item => ({
        day_time: item.day_time,
        content: item[data.key]
    }));
    if (!chart.chart1) {
        chart.chart1 = new Chart({
            container: "trendsChart",
            autoFit: true,
            height: 500,
            padding: 20,
        });
    }
    

    chart.chart1
        .data(newList)
    .encode('x', 'day_time')
    .encode('y', 'content')

    chart.chart1.line().label({
        text: '',
        style: {
            dx: -10,
            dy: -12,
        },
    }).style('lineWidth', (data) => {
        return 2; // 根据数据动态变化
    }).encode('shape', 'smooth')

  
    // 图表阴影
    chart.chart1
    .area()
    .encode('shape', 'smooth') // 匹配曲线形状
    .style('fill', 'l(90) 0:#e9f4ff 1:#ffffff00').tooltip(false) // 线性渐变


  
    // 图表 tooltip 效果
    chart.chart1.interaction('tooltip', {
    // render 回调方法返回一个innerHTML 或者 ReactNode
        render: (event, { title, items }) => {
            const showVal = VideoDataTrendsRef.value?.dataTrendKeyVal
            return `<div>
                <p>${title} </p>
                <span> ${showVal?.name}：  ${items?.[0]?.value}</span>
                </div>`
        }       
    });

    chart.chart1.render();
}

// 视频数据趋势
const getDataTrends=()=>{
    let params ={
        name: dataTrendsAccountNum.value,
        platform: accountData.value.key || '',
    }
    if(dataTrendsAccountDay.value.length){
        params.startTime = dataTrendsAccountDay.value[0].format('YYYY-MM-DD')
        params.endTime = dataTrendsAccountDay.value[1].format('YYYY-MM-DD')
    }
    request
    .get("/work_ai", "/user/video/data/trends", params)
    .then((res) => {
        dataTrendList.value = res.result.content
        chartList.value = res.result.list
        videoDataChange(dataTrendList.value[0])
        console.log(chartList.value,'chartList.value');
    });
}

const onDataTrendsAccountNumSearch=()=>{
    getDataTrends()
}

const dayClick=({key})=>{
    dayKey.value = key
    switch (key) {  
        case 0:  
        startDate.value = endDate.subtract(7, 'day'); 

        dataTrendsAccountDay.value =  [startDate.value, endDate];
        getDataTrends()
            break;  
        case 1:  
        startDate.value = endDate.subtract(30, 'day'); 

        dataTrendsAccountDay.value =  [startDate.value, endDate];
        getDataTrends()
            break;  
        default:  
        startDate.value = endDate.subtract(90, 'day'); 

        dataTrendsAccountDay.value =  [startDate.value, endDate];
        getDataTrends()
            break;  
    }
}

const dayChange=(dayjs, dateString)=>{
    if(dateString[0].length){
        dayKey.value = 2
    }else{
        dayKey.value = 0
        startDate.value = endDate.subtract(7, 'day'); 
        dataTrendsAccountDay.value =  [startDate.value, endDate];
    }
    getDataTrends()
}


const dataDetailSource=ref([])

const viewVideoClick=(item)=>{
  viewVideoRef.value.open(item.film_video?.multimedia?.material_url)
}

const detailColumns =ref([
    {
        title: '日期',
        dataIndex: 'day_time',
        sorter: {
            compare: (a, b) => a.day_time - b.day_time,
        },
    },
    {
        title: '剪辑成片数',
        dataIndex: 'cutProductCount',
        sorter: {
            compare: (a, b) => a.cutProductCount - b.cutProductCount,
        },
    },
    {
        title: '发布视频数',
        dataIndex: 'total_release_count',
        sorter: {
            compare: (a, b) => a.total_release_count - b.total_release_count,
        },
    },
    {
        title: '播放量',
        dataIndex: 'total_plat_count',
        sorter: {
            compare: (a, b) => a.total_plat_count - b.total_plat_count,
        },
    },
    {
        title: '评论数',
        dataIndex: 'total_comment_count',
        sorter: {
            compare: (a, b) => a.total_comment_count - b.total_comment_count,
        },
    },
    {
        title: '分享数',
        dataIndex: 'total_share_count',
        sorter: {
            compare: (a, b) => a.total_share_count - b.total_share_count,
        },
    },
])





const accountAuthorizationData = ref([])
// 平台账号授权
const getAccountAuthorization = ()=>{
    request.get('/work_ai','/user/film/data/new',{name:accountNum.value}).then((res)=>{
        let accountTotal = String(res.result.account_total)
        accountAuthorizationData.value = res.result.platformAccountList.map((item)=>{
            return {
                item: item.value,
                count: item.account_count, 
                percent: item.account_rate,
                ...item
            }
        })
    
        if (!chart.chart3) {
            chart.chart3 = new Chart({
                container: "accountAuthorization",
                autoFit: true,
                height: 500,
                padding: 20,
                paddingTop:40,
            });
        }
        chart.chart3.clear()

        chart.chart3
        .render()
        .then(() => {
            chart.chart3.render();
            if(accountTotal==0){
                accountAuthorizationData.value =[]
            }

            // 渲染成功
            chart.chart3.coordinate({ type: 'theta', outerRadius: 0.6, innerRadius: 0.4 });
            chart.chart3
            .interval()
            .data(accountAuthorizationData.value)
            .transform({ type: 'stackY' })
            .encode('y', 'percent')
            .encode('color', 'item')
            .legend('color', { position: 'top', layout: { justifyContent: 'center' } })
            .label({
                position: 'outside',
                text: (data) => `${data.value} : ${data.account_count}个  ${data.account_rate_text }`,
            })
            .tooltip((data) => ({
                name: data.value,
                value: `${data.account_rate_text}`,
            }));

            chart.chart3
            .text()
            .style('text',  accountTotal )
            // Relative position
            .style('x', '50%')
            .style('y', '55%')
            .style('dy', -25)
            .style('fontSize', 30)
            .style('fill', '#000')
            .style('textAlign', 'center');

            chart.chart3
            .text()
            .style('text', '账号授权')
            // Relative position
            .style('x', '50%')
            .style('y', '51%')
            .style('dx', 0)
            .style('dy', 20)
            .style('fontSize', 16)
            .style('fill', '#000')
            .style('textAlign', 'center');

            chart.chart3.render();
        })
       
    })
}

// 平台账号发布 
const dataNewList=ref([])
const getDataNew =()=>{
    request.get('/work_ai','/user/publish/data/new',{name:accountNum.value}).then((res)=>{
        let filmTotal = String(res.result.film_total)
        dataNewList.value = res.result.filmList.map((item)=>{
            return {
                item: item.value,
                count: item.film_count, 
                percent: item.film_rate,
                ...item
            }
        })

        if (!chart.chart4) {
            chart.chart4 = new Chart({
                container: "dataNew",
                autoFit: true,
                height: 500,
                padding: 20,
                paddingTop:40
            });
        }
        chart.chart4.clear()

        chart.chart4
        .render()
        .then(() => {
            chart.chart4.render();
            chart.chart4.coordinate({ type: 'theta', outerRadius: 0.6, innerRadius: 0.4 });
            if(filmTotal==0){
                dataNewList.value =[]
            }
            chart.chart4
            .interval()
            .data(dataNewList.value)
            .transform({ type: 'stackY' })
            .encode('y', 'percent')
            .encode('color', 'item')
            .legend('color', { position: 'top', layout: { justifyContent: 'center' } })
            .label({
                position: 'outside',
                text: (data) => {
                    return `${data.value} : ${data.film_count}个  ${data.film_rate_text }`;
                },
            })
            .tooltip((data) => ({
                name: data.value,
                value: `${data.film_rate_text}`,
            }));

            chart.chart4
            .text()
            .style('text', filmTotal )
            // Relative position
            .style('x', '50%')
            .style('y', '55%')
            .style('dy', -25)
            .style('fontSize', 30)
            .style('fill', '#000')
            .style('textAlign', 'center')

            chart.chart4
            .text()
            .style('text', '平台发布')
            // Relative position
            .style('x', '50%')
            .style('y', '51%')
            .style('dx', 0)
            .style('dy', 20)
            .style('fontSize', 16)
            .style('fill', '#000')
            .style('textAlign', 'center');
            chart.chart4.render();
        })
        
    })
}

// 表现优异作品 TOP 20
const filmDayClick=({key})=>{
    filmDayKey.value = key
    if(key == 0 ){
        startDate.value = endDate.subtract(7, 'day'); 
        filmDayTime.value =  [startDate.value, endDate];
     
    }
    if(key ==1 ){
        startDate.value = endDate.subtract(30, 'day'); 
        filmDayTime.value =  [startDate.value, endDate];
    }
    if(key == 2){
        startDate.value = endDate.subtract(90, 'day'); 
        filmDayTime.value =  [startDate.value, endDate];
    }
    topFimTypeKey.value = 'play'
    getFilmVideoTop()
}

const topFimTypeClick=({key})=>{
    topFimTypeKey.value = key
    getFilmVideoTop()
}

const filmVideoTopList =ref([])
const getFilmVideoTop=()=>{
    let params = {
        name:accountNum.value,
        topType:topFimTypeKey.value,
        topNumber:20,
        startTime:filmDayTime.value[0].format('YYYY-MM-DD'),
        endTime:filmDayTime.value[1].format('YYYY-MM-DD'),
    }
    request.get('/work_ai', '/user/film/video/top', params).then((res) => {    
        filmVideoTopList.value = res.result.list
    })
}
   
const accountDayTime =ref([])
const accountKeyClick=({key})=>{
    accountKey.value = key
    if(key == 0 ){
        startDate.value = endDate.subtract(7, 'day'); 
        accountDayTime.value =  [startDate.value, endDate];
     
    }
    if(key ==1 ){
        startDate.value = endDate.subtract(30, 'day'); 
        accountDayTime.value =  [startDate.value, endDate];
    }
    if(key == 2){
        startDate.value = endDate.subtract(90, 'day'); 
        accountDayTime.value =  [startDate.value, endDate];
    }
    topAccountKey.value = 'play'
    if(chart.chart5){
        chart.chart5.clear()
    }
    getAccountVideoTop()
}

const topAccountClick=({key})=>{
    topAccountKey.value = key
    if(chart.chart5){
        chart.chart5.clear()
    }
    getAccountVideoTop()
}

const accountVideoTop =ref([])
const getAccountVideoTop=()=>{
    let params ={
        name: dataTrendsAccountNum.value,
        topNumber:20,
        topType:topAccountKey.value,
    }
    if(accountDayTime.value.length){
        params.startTime = accountDayTime.value[0].format('YYYY-MM-DD')
        params.endTime = accountDayTime.value[1].format('YYYY-MM-DD')
    }
    request.get('/work_ai','/user/account/video/top',params).then((res)=>{
        if(!res.result.list.length){
            accountVideoTop.value=[]
            return
        }
        accountVideoTop.value = res.result.list.map((item)=>{
            return {
                total_value: Number(item.total_value),
                nickname:item.platform_account.nickname,
                ...item
            }
        })
    //     accountVideoTop.value = [
    //     {
    //       "account_id": 126,
    //       "platform": "weixinshipinhao",
    //       "total_plat_count": "32",
    //       "total_like_count": "0",
    //       "total_comment_count": "0",
    //       "total_share_count": "0",
    //       "total_collect_count": "0",
    //       "total_follow_count": "0",
    //       "total_value": 32,
    //       "nickname": "紫云录",
    //       "platform_account": {
    //         "id": 126,
    //         "org_id": 2,
    //         "avatar": "https://bailing-1305744786.cos.ap-nanjing.myqcloud.com/upload/platform/avatar/20250305/755782983755718656.png",
    //         "nickname": "紫云录",
    //         "status": 0,
    //         "source": "weixinshipinhao",
    //         "status_txt": "离线",
    //         "source_txt": "视频号",
    //         "platform": {
    //           "key": "weixinshipinhao",
    //           "value": "视频号",
    //           "image": "https://local.kuaijingai.com/public_web/static/images/workAi/platform/shipinghao.png",
    //           "login_url": "https://channels.weixin.qq.com/login.html",
    //           "listen_url": "https://channels.weixin.qq.com/cgi-bin/mmfinderassistant-bin/vip/get-user-member-service-status",
    //           "org_listen_url": "",
    //           "home_url": "https://channels.weixin.qq.com/platform",
    //           "comment_url": "https://channels.weixin.qq.com/platform/comment",
    //           "min_upload_number": 0,
    //           "max_upload_number": 18,
    //           "max_upload_tip": "发布图片动态，可上传最多18张图片，单张不超过20MB，支持常见图片格式。",
    //           "is_scan_authorize": false,
    //           "article_type": "short",
    //           "developing": 0
    //         }
    //       }
    //     },
    //     {
    //       "account_id": 3,
    //       "platform": "douyin",
    //       "total_plat_count": "3",
    //       "total_like_count": "0",
    //       "total_comment_count": "0",
    //       "total_share_count": "0",
    //       "total_collect_count": "0",
    //       "total_follow_count": "0",
    //       "total_value":3,
    //       "nickname": "幻梦",
    //       "platform_account": {
    //         "id": 3,
    //         "org_id": 2,
    //         "avatar": "https://bailing-1305744786.cos.ap-nanjing.myqcloud.com/upload/platform/avatar/20250313/758621315422674944.jpg",
    //         "nickname": "幻梦",
    //         "status": 1,
    //         "source": "douyin",
    //         "status_txt": "在线",
    //         "source_txt": "抖音",
    //         "platform": {
    //           "key": "douyin",
    //           "value": "抖音",
    //           "image": "https://local.kuaijingai.com/public_web/static/images/workAi/platform/douyin.png",
    //           "login_url": "https://creator.douyin.com",
    //           "listen_url": "https://creator.douyin.com/aweme/v1/creator/im/user_token/v2/",
    //           "org_listen_url": "https://creator.douyin.com/web/api/v1/im/token/",
    //           "home_url": "https://creator.douyin.com/creator-micro/home",
    //           "comment_url": "https://creator.douyin.com/creator-micro/data/following/comment",
    //           "min_upload_number": 1,
    //           "max_upload_number": 35,
    //           "max_upload_tip": "最多支持上传35张图片，图片格式不支持gif格式",
    //           "is_scan_authorize": false,
    //           "article_type": "short",
    //           "developing": 0
    //         }
    //       }
    //     },
    //     // {
    //     //   "account_id": 52,
    //     //   "platform": "bilibili",
    //     //   "total_plat_count": "1",
    //     //   "total_like_count": "1",
    //     //   "total_comment_count": "0",
    //     //   "total_share_count": "0",
    //     //   "total_collect_count": "0",
    //     //   "total_follow_count": "0",
    //     //   "total_value": 1,
    //     //   "nickname": "方云舟",
    //     //   "platform_account": {
    //     //     "id": 52,
    //     //     "org_id": 2,
    //     //     "avatar": "https://shotstack.oss-cn-hangzhou.aliyuncs.com/upload/platform/avatar/20240913/693095875031678977.png",
    //     //     "nickname": "方云舟",
    //     //     "status": 1,
    //     //     "source": "bilibili",
    //     //     "status_txt": "在线",
    //     //     "source_txt": "哔哩哔哩",
    //     //     "platform": {
    //     //       "key": "bilibili",
    //     //       "value": "哔哩哔哩",
    //     //       "image": "https://local.kuaijingai.com/public_web/static/images/workAi/platform/bilibili.png",
    //     //       "login_url": " ",
    //     //       "listen_url": "",
    //     //       "home_url": "https://www.bilibili.com",
    //     //       "comment_url": "https://member.bilibili.com/platform/comment/article",
    //     //       "min_upload_number": 0,
    //     //       "max_upload_number": 0,
    //     //       "max_upload_tip": "",
    //     //       "is_scan_authorize": true,
    //     //       "developing": 0
    //     //     }
    //     //   }
    //     // },
    //     // {
    //     //   "account_id": 81,
    //     //   "platform": "bilibili",
    //     //   "total_plat_count": "0",
    //     //   "total_like_count": "0",
    //     //   "total_comment_count": "0",
    //     //   "total_share_count": "0",
    //     //   "total_collect_count": "1",
    //     //   "total_follow_count": "0",
    //     //   "total_value": 12,
    //     //   "nickname": "方云舟132",
    //     //   "platform_account": {
    //     //     "id": 81,
    //     //     "org_id": 2,
    //     //     "avatar": "https://bailing-1305744786.cos.ap-nanjing.myqcloud.com/upload/platform/avatar/20241219/728258473497747456.jpg",
    //     //     "nickname": "方云舟1",
    //     //     "status": 1,
    //     //     "source": "bilibili",
    //     //     "status_txt": "在线",
    //     //     "source_txt": "哔哩哔哩",
    //     //     "platform": {
    //     //       "key": "bilibili",
    //     //       "value": "哔哩哔哩",
    //     //       "image": "https://local.kuaijingai.com/public_web/static/images/workAi/platform/bilibili.png",
    //     //       "login_url": " ",
    //     //       "listen_url": "",
    //     //       "home_url": "https://www.bilibili.com",
    //     //       "comment_url": "https://member.bilibili.com/platform/comment/article",
    //     //       "min_upload_number": 0,
    //     //       "max_upload_number": 0,
    //     //       "max_upload_tip": "",
    //     //       "is_scan_authorize": true,
    //     //       "developing": 0
    //     //     }
    //     //   }
    //     // },
    //     // {
    //     //   "account_id": 81,
    //     //   "platform": "bilibili",
    //     //   "total_plat_count": "0",
    //     //   "total_like_count": "0",
    //     //   "total_comment_count": "0",
    //     //   "total_share_count": "0",
    //     //   "total_collect_count": "1",
    //     //   "total_follow_count": "0",
    //     //   "total_value": 12,
    //     //   "nickname": "方云舟3212",
    //     //   "platform_account": {
    //     //     "id": 81,
    //     //     "org_id": 2,
    //     //     "avatar": "https://bailing-1305744786.cos.ap-nanjing.myqcloud.com/upload/platform/avatar/20241219/728258473497747456.jpg",
    //     //     "nickname": "方云舟1",
    //     //     "status": 1,
    //     //     "source": "bilibili",
    //     //     "status_txt": "在线",
    //     //     "source_txt": "哔哩哔哩",
    //     //     "platform": {
    //     //       "key": "bilibili",
    //     //       "value": "哔哩哔哩",
    //     //       "image": "https://local.kuaijingai.com/public_web/static/images/workAi/platform/bilibili.png",
    //     //       "login_url": " ",
    //     //       "listen_url": "",
    //     //       "home_url": "https://www.bilibili.com",
    //     //       "comment_url": "https://member.bilibili.com/platform/comment/article",
    //     //       "min_upload_number": 0,
    //     //       "max_upload_number": 0,
    //     //       "max_upload_tip": "",
    //     //       "is_scan_authorize": true,
    //     //       "developing": 0
    //     //     }
    //     //   }
    //     // }
    //     // ,
    //     // {
    //     //   "account_id": 81,
    //     //   "platform": "bilibili",
    //     //   "total_plat_count": "0",
    //     //   "total_like_count": "0",
    //     //   "total_comment_count": "0",
    //     //   "total_share_count": "0",
    //     //   "total_collect_count": "1",
    //     //   "total_follow_count": "0",
    //     //   "total_value": 12,
    //     //   "nickname": "方云舟71",
    //     //   "platform_account": {
    //     //     "id": 81,
    //     //     "org_id": 2,
    //     //     "avatar": "https://bailing-1305744786.cos.ap-nanjing.myqcloud.com/upload/platform/avatar/20241219/728258473497747456.jpg",
    //     //     "nickname": "方云舟1",
    //     //     "status": 1,
    //     //     "source": "bilibili",
    //     //     "status_txt": "在线",
    //     //     "source_txt": "哔哩哔哩",
    //     //     "platform": {
    //     //       "key": "bilibili",
    //     //       "value": "哔哩哔哩",
    //     //       "image": "https://local.kuaijingai.com/public_web/static/images/workAi/platform/bilibili.png",
    //     //       "login_url": " ",
    //     //       "listen_url": "",
    //     //       "home_url": "https://www.bilibili.com",
    //     //       "comment_url": "https://member.bilibili.com/platform/comment/article",
    //     //       "min_upload_number": 0,
    //     //       "max_upload_number": 0,
    //     //       "max_upload_tip": "",
    //     //       "is_scan_authorize": true,
    //     //       "developing": 0
    //     //     }
    //     //   }
    //     // },
    //     // {
    //     //   "account_id": 81,
    //     //   "platform": "bilibili",
    //     //   "total_plat_count": "0",
    //     //   "total_like_count": "0",
    //     //   "total_comment_count": "0",
    //     //   "total_share_count": "0",
    //     //   "total_collect_count": "1",
    //     //   "total_follow_count": "0",
    //     //   "total_value": 12,
    //     //   "nickname": "方云舟61",
    //     //   "platform_account": {
    //     //     "id": 81,
    //     //     "org_id": 2,
    //     //     "avatar": "https://bailing-1305744786.cos.ap-nanjing.myqcloud.com/upload/platform/avatar/20241219/728258473497747456.jpg",
    //     //     "nickname": "方云舟1",
    //     //     "status": 1,
    //     //     "source": "bilibili",
    //     //     "status_txt": "在线",
    //     //     "source_txt": "哔哩哔哩",
    //     //     "platform": {
    //     //       "key": "bilibili",
    //     //       "value": "哔哩哔哩",
    //     //       "image": "https://local.kuaijingai.com/public_web/static/images/workAi/platform/bilibili.png",
    //     //       "login_url": " ",
    //     //       "listen_url": "",
    //     //       "home_url": "https://www.bilibili.com",
    //     //       "comment_url": "https://member.bilibili.com/platform/comment/article",
    //     //       "min_upload_number": 0,
    //     //       "max_upload_number": 0,
    //     //       "max_upload_tip": "",
    //     //       "is_scan_authorize": true,
    //     //       "developing": 0
    //     //     }
    //     //   }
    //     // },
    //     // {
    //     //   "account_id": 81,
    //     //   "platform": "bilibili",
    //     //   "total_plat_count": "0",
    //     //   "total_like_count": "0",
    //     //   "total_comment_count": "0",
    //     //   "total_share_count": "0",
    //     //   "total_collect_count": "1",
    //     //   "total_follow_count": "0",
    //     //   "total_value": 12,
    //     //   "nickname": "方云舟51",
    //     //   "platform_account": {
    //     //     "id": 81,
    //     //     "org_id": 2,
    //     //     "avatar": "https://bailing-1305744786.cos.ap-nanjing.myqcloud.com/upload/platform/avatar/20241219/728258473497747456.jpg",
    //     //     "nickname": "方云舟1",
    //     //     "status": 1,
    //     //     "source": "bilibili",
    //     //     "status_txt": "在线",
    //     //     "source_txt": "哔哩哔哩",
    //     //     "platform": {
    //     //       "key": "bilibili",
    //     //       "value": "哔哩哔哩",
    //     //       "image": "https://local.kuaijingai.com/public_web/static/images/workAi/platform/bilibili.png",
    //     //       "login_url": " ",
    //     //       "listen_url": "",
    //     //       "home_url": "https://www.bilibili.com",
    //     //       "comment_url": "https://member.bilibili.com/platform/comment/article",
    //     //       "min_upload_number": 0,
    //     //       "max_upload_number": 0,
    //     //       "max_upload_tip": "",
    //     //       "is_scan_authorize": true,
    //     //       "developing": 0
    //     //     }
    //     //   }
    //     // },
    //     // {
    //     //   "account_id": 81,
    //     //   "platform": "bilibili",
    //     //   "total_plat_count": "0",
    //     //   "total_like_count": "0",
    //     //   "total_comment_count": "0",
    //     //   "total_share_count": "0",
    //     //   "total_collect_count": "1",
    //     //   "total_follow_count": "0",
    //     //   "total_value": 12,
    //     //   "nickname": "方云舟41",
    //     //   "platform_account": {
    //     //     "id": 81,
    //     //     "org_id": 2,
    //     //     "avatar": "https://bailing-1305744786.cos.ap-nanjing.myqcloud.com/upload/platform/avatar/20241219/728258473497747456.jpg",
    //     //     "nickname": "方云舟1",
    //     //     "status": 1,
    //     //     "source": "bilibili",
    //     //     "status_txt": "在线",
    //     //     "source_txt": "哔哩哔哩",
    //     //     "platform": {
    //     //       "key": "bilibili",
    //     //       "value": "哔哩哔哩",
    //     //       "image": "https://local.kuaijingai.com/public_web/static/images/workAi/platform/bilibili.png",
    //     //       "login_url": " ",
    //     //       "listen_url": "",
    //     //       "home_url": "https://www.bilibili.com",
    //     //       "comment_url": "https://member.bilibili.com/platform/comment/article",
    //     //       "min_upload_number": 0,
    //     //       "max_upload_number": 0,
    //     //       "max_upload_tip": "",
    //     //       "is_scan_authorize": true,
    //     //       "developing": 0
    //     //     }
    //     //   }
    //     // },
    //     // {
    //     //   "account_id": 81,
    //     //   "platform": "bilibili",
    //     //   "total_plat_count": "0",
    //     //   "total_like_count": "0",
    //     //   "total_comment_count": "0",
    //     //   "total_share_count": "0",
    //     //   "total_collect_count": "1",
    //     //   "total_follow_count": "0",
    //     //   "total_value": 12,
    //     //   "nickname": "方云舟14243",
    //     //   "platform_account": {
    //     //     "id": 81,
    //     //     "org_id": 2,
    //     //     "avatar": "https://bailing-1305744786.cos.ap-nanjing.myqcloud.com/upload/platform/avatar/20241219/728258473497747456.jpg",
    //     //     "nickname": "方云舟1",
    //     //     "status": 1,
    //     //     "source": "bilibili",
    //     //     "status_txt": "在线",
    //     //     "source_txt": "哔哩哔哩",
    //     //     "platform": {
    //     //       "key": "bilibili",
    //     //       "value": "哔哩哔哩",
    //     //       "image": "https://local.kuaijingai.com/public_web/static/images/workAi/platform/bilibili.png",
    //     //       "login_url": " ",
    //     //       "listen_url": "",
    //     //       "home_url": "https://www.bilibili.com",
    //     //       "comment_url": "https://member.bilibili.com/platform/comment/article",
    //     //       "min_upload_number": 0,
    //     //       "max_upload_number": 0,
    //     //       "max_upload_tip": "",
    //     //       "is_scan_authorize": true,
    //     //       "developing": 0
    //     //     }
    //     //   }
    //     // },
    //     // {
    //     //   "account_id": 81,
    //     //   "platform": "bilibili",
    //     //   "total_plat_count": "0",
    //     //   "total_like_count": "0",
    //     //   "total_comment_count": "0",
    //     //   "total_share_count": "0",
    //     //   "total_collect_count": "1",
    //     //   "total_follow_count": "0",
    //     //   "total_value": 12,
    //     //   "nickname": "方云舟12423",
    //     //   "platform_account": {
    //     //     "id": 81,
    //     //     "org_id": 2,
    //     //     "avatar": "https://bailing-1305744786.cos.ap-nanjing.myqcloud.com/upload/platform/avatar/20241219/728258473497747456.jpg",
    //     //     "nickname": "方云舟1",
    //     //     "status": 1,
    //     //     "source": "bilibili",
    //     //     "status_txt": "在线",
    //     //     "source_txt": "哔哩哔哩",
    //     //     "platform": {
    //     //       "key": "bilibili",
    //     //       "value": "哔哩哔哩",
    //     //       "image": "https://local.kuaijingai.com/public_web/static/images/workAi/platform/bilibili.png",
    //     //       "login_url": " ",
    //     //       "listen_url": "",
    //     //       "home_url": "https://www.bilibili.com",
    //     //       "comment_url": "https://member.bilibili.com/platform/comment/article",
    //     //       "min_upload_number": 0,
    //     //       "max_upload_number": 0,
    //     //       "max_upload_tip": "",
    //     //       "is_scan_authorize": true,
    //     //       "developing": 0
    //     //     }
    //     //   }
    //     // },
    //     // {
    //     //   "account_id": 81,
    //     //   "platform": "bilibili",
    //     //   "total_plat_count": "0",
    //     //   "total_like_count": "0",
    //     //   "total_comment_count": "0",
    //     //   "total_share_count": "0",
    //     //   "total_collect_count": "1",
    //     //   "total_follow_count": "0",
    //     //   "total_value": 12,
    //     //   "nickname": "方云舟14243",
    //     //   "platform_account": {
    //     //     "id": 81,
    //     //     "org_id": 2,
    //     //     "avatar": "https://bailing-1305744786.cos.ap-nanjing.myqcloud.com/upload/platform/avatar/20241219/728258473497747456.jpg",
    //     //     "nickname": "方云舟1",
    //     //     "status": 1,
    //     //     "source": "bilibili",
    //     //     "status_txt": "在线",
    //     //     "source_txt": "哔哩哔哩",
    //     //     "platform": {
    //     //       "key": "bilibili",
    //     //       "value": "哔哩哔哩",
    //     //       "image": "https://local.kuaijingai.com/public_web/static/images/workAi/platform/bilibili.png",
    //     //       "login_url": " ",
    //     //       "listen_url": "",
    //     //       "home_url": "https://www.bilibili.com",
    //     //       "comment_url": "https://member.bilibili.com/platform/comment/article",
    //     //       "min_upload_number": 0,
    //     //       "max_upload_number": 0,
    //     //       "max_upload_tip": "",
    //     //       "is_scan_authorize": true,
    //     //       "developing": 0
    //     //     }
    //     //   }
    //     // },
    //     // {
    //     //   "account_id": 81,
    //     //   "platform": "bilibili",
    //     //   "total_plat_count": "0",
    //     //   "total_like_count": "0",
    //     //   "total_comment_count": "0",
    //     //   "total_share_count": "0",
    //     //   "total_collect_count": "1",
    //     //   "total_follow_count": "0",
    //     //   "total_value": 12,
    //     //   "nickname": "方云舟11423",
    //     //   "platform_account": {
    //     //     "id": 81,
    //     //     "org_id": 2,
    //     //     "avatar": "https://bailing-1305744786.cos.ap-nanjing.myqcloud.com/upload/platform/avatar/20241219/728258473497747456.jpg",
    //     //     "nickname": "方云舟1",
    //     //     "status": 1,
    //     //     "source": "bilibili",
    //     //     "status_txt": "在线",
    //     //     "source_txt": "哔哩哔哩",
    //     //     "platform": {
    //     //       "key": "bilibili",
    //     //       "value": "哔哩哔哩",
    //     //       "image": "https://local.kuaijingai.com/public_web/static/images/workAi/platform/bilibili.png",
    //     //       "login_url": " ",
    //     //       "listen_url": "",
    //     //       "home_url": "https://www.bilibili.com",
    //     //       "comment_url": "https://member.bilibili.com/platform/comment/article",
    //     //       "min_upload_number": 0,
    //     //       "max_upload_number": 0,
    //     //       "max_upload_tip": "",
    //     //       "is_scan_authorize": true,
    //     //       "developing": 0
    //     //     }
    //     //   }
    //     // },
    //     // {
    //     //   "account_id": 81,
    //     //   "platform": "bilibili",
    //     //   "total_plat_count": "0",
    //     //   "total_like_count": "0",
    //     //   "total_comment_count": "0",
    //     //   "total_share_count": "0",
    //     //   "total_collect_count": "1",
    //     //   "total_follow_count": "0",
    //     //   "total_value": 12,
    //     //   "nickname": "方云舟14223",
    //     //   "platform_account": {
    //     //     "id": 81,
    //     //     "org_id": 2,
    //     //     "avatar": "https://bailing-1305744786.cos.ap-nanjing.myqcloud.com/upload/platform/avatar/20241219/728258473497747456.jpg",
    //     //     "nickname": "方云舟1",
    //     //     "status": 1,
    //     //     "source": "bilibili",
    //     //     "status_txt": "在线",
    //     //     "source_txt": "哔哩哔哩",
    //     //     "platform": {
    //     //       "key": "bilibili",
    //     //       "value": "哔哩哔哩",
    //     //       "image": "https://local.kuaijingai.com/public_web/static/images/workAi/platform/bilibili.png",
    //     //       "login_url": " ",
    //     //       "listen_url": "",
    //     //       "home_url": "https://www.bilibili.com",
    //     //       "comment_url": "https://member.bilibili.com/platform/comment/article",
    //     //       "min_upload_number": 0,
    //     //       "max_upload_number": 0,
    //     //       "max_upload_tip": "",
    //     //       "is_scan_authorize": true,
    //     //       "developing": 0
    //     //     }
    //     //   }
    //     // },
    //     // {
    //     //   "account_id": 81,
    //     //   "platform": "bilibili",
    //     //   "total_plat_count": "0",
    //     //   "total_like_count": "0",
    //     //   "total_comment_count": "0",
    //     //   "total_share_count": "0",
    //     //   "total_collect_count": "1",
    //     //   "total_follow_count": "0",
    //     //   "total_value": 12,
    //     //   "nickname": "55432",
    //     //   "platform_account": {
    //     //     "id": 81,
    //     //     "org_id": 2,
    //     //     "avatar": "https://bailing-1305744786.cos.ap-nanjing.myqcloud.com/upload/platform/avatar/20241219/728258473497747456.jpg",
    //     //     "nickname": "方云舟1",
    //     //     "status": 1,
    //     //     "source": "bilibili",
    //     //     "status_txt": "在线",
    //     //     "source_txt": "哔哩哔哩",
    //     //     "platform": {
    //     //       "key": "bilibili",
    //     //       "value": "哔哩哔哩",
    //     //       "image": "https://local.kuaijingai.com/public_web/static/images/workAi/platform/bilibili.png",
    //     //       "login_url": " ",
    //     //       "listen_url": "",
    //     //       "home_url": "https://www.bilibili.com",
    //     //       "comment_url": "https://member.bilibili.com/platform/comment/article",
    //     //       "min_upload_number": 0,
    //     //       "max_upload_number": 0,
    //     //       "max_upload_tip": "",
    //     //       "is_scan_authorize": true,
    //     //       "developing": 0
    //     //     }
    //     //   }
    //     // },
    //     {
    //       "account_id": 81,
    //       "platform": "bilibili",
    //       "total_plat_count": "0",
    //       "total_like_count": "0",
    //       "total_comment_count": "0",
    //       "total_share_count": "0",
    //       "total_collect_count": "1",
    //       "total_follow_count": "0",
    //       "total_value": 12,
    //       "nickname": "5432",
    //       "platform_account": {
    //         "id": 81,
    //         "org_id": 2,
    //         "avatar": "https://bailing-1305744786.cos.ap-nanjing.myqcloud.com/upload/platform/avatar/20241219/728258473497747456.jpg",
    //         "nickname": "方云舟1",
    //         "status": 1,
    //         "source": "bilibili",
    //         "status_txt": "在线",
    //         "source_txt": "哔哩哔哩",
    //         "platform": {
    //           "key": "bilibili",
    //           "value": "哔哩哔哩",
    //           "image": "https://local.kuaijingai.com/public_web/static/images/workAi/platform/bilibili.png",
    //           "login_url": " ",
    //           "listen_url": "",
    //           "home_url": "https://www.bilibili.com",
    //           "comment_url": "https://member.bilibili.com/platform/comment/article",
    //           "min_upload_number": 0,
    //           "max_upload_number": 0,
    //           "max_upload_tip": "",
    //           "is_scan_authorize": true,
    //           "developing": 0
    //         }
    //       }
    //     },
    //     {
    //       "account_id": 81,
    //       "platform": "bilibili",
    //       "total_plat_count": "0",
    //       "total_like_count": "0",
    //       "total_comment_count": "0",
    //       "total_share_count": "0",
    //       "total_collect_count": "1",
    //       "total_follow_count": "0",
    //       "total_value": 12,
    //       "nickname": "54354111",
    //       "platform_account": {
    //         "id": 81,
    //         "org_id": 2,
    //         "avatar": "https://bailing-1305744786.cos.ap-nanjing.myqcloud.com/upload/platform/avatar/20241219/728258473497747456.jpg",
    //         "nickname": "方云舟1",
    //         "status": 1,
    //         "source": "bilibili",
    //         "status_txt": "在线",
    //         "source_txt": "哔哩哔哩",
    //         "platform": {
    //           "key": "bilibili",
    //           "value": "哔哩哔哩",
    //           "image": "https://local.kuaijingai.com/public_web/static/images/workAi/platform/bilibili.png",
    //           "login_url": " ",
    //           "listen_url": "",
    //           "home_url": "https://www.bilibili.com",
    //           "comment_url": "https://member.bilibili.com/platform/comment/article",
    //           "min_upload_number": 0,
    //           "max_upload_number": 0,
    //           "max_upload_tip": "",
    //           "is_scan_authorize": true,
    //           "developing": 0
    //         }
    //       }
    //     },
    //     {
    //       "account_id": 81,
    //       "platform": "bilibili",
    //       "total_plat_count": "0",
    //       "total_like_count": "0",
    //       "total_comment_count": "0",
    //       "total_share_count": "0",
    //       "total_collect_count": "1",
    //       "total_follow_count": "0",
    //       "total_value": 12,
    //       "nickname": "665765",
    //       "platform_account": {
    //         "id": 81,
    //         "org_id": 2,
    //         "avatar": "https://bailing-1305744786.cos.ap-nanjing.myqcloud.com/upload/platform/avatar/20241219/728258473497747456.jpg",
    //         "nickname": "方云舟1",
    //         "status": 1,
    //         "source": "bilibili",
    //         "status_txt": "在线",
    //         "source_txt": "哔哩哔哩",
    //         "platform": {
    //           "key": "bilibili",
    //           "value": "哔哩哔哩",
    //           "image": "https://local.kuaijingai.com/public_web/static/images/workAi/platform/bilibili.png",
    //           "login_url": " ",
    //           "listen_url": "",
    //           "home_url": "https://www.bilibili.com",
    //           "comment_url": "https://member.bilibili.com/platform/comment/article",
    //           "min_upload_number": 0,
    //           "max_upload_number": 0,
    //           "max_upload_tip": "",
    //           "is_scan_authorize": true,
    //           "developing": 0
    //         }
    //       }
    //     },
    //     {
    //       "account_id": 81,
    //       "platform": "bilibili",
    //       "total_plat_count": "0",
    //       "total_like_count": "0",
    //       "total_comment_count": "0",
    //       "total_share_count": "0",
    //       "total_collect_count": "1",
    //       "total_follow_count": "0",
    //       "total_value": 12,
    //       "nickname": "654645",
    //       "platform_account": {
    //         "id": 81,
    //         "org_id": 2,
    //         "avatar": "https://bailing-1305744786.cos.ap-nanjing.myqcloud.com/upload/platform/avatar/20241219/728258473497747456.jpg",
    //         "nickname": "方云舟1",
    //         "status": 1,
    //         "source": "bilibili",
    //         "status_txt": "在线",
    //         "source_txt": "哔哩哔哩",
    //         "platform": {
    //           "key": "bilibili",
    //           "value": "哔哩哔哩",
    //           "image": "https://local.kuaijingai.com/public_web/static/images/workAi/platform/bilibili.png",
    //           "login_url": " ",
    //           "listen_url": "",
    //           "home_url": "https://www.bilibili.com",
    //           "comment_url": "https://member.bilibili.com/platform/comment/article",
    //           "min_upload_number": 0,
    //           "max_upload_number": 0,
    //           "max_upload_tip": "",
    //           "is_scan_authorize": true,
    //           "developing": 0
    //         }
    //       }
    //     },
    //     {
    //       "account_id": 81,
    //       "platform": "bilibili",
    //       "total_plat_count": "0",
    //       "total_like_count": "0",
    //       "total_comment_count": "0",
    //       "total_share_count": "0",
    //       "total_collect_count": "1",
    //       "total_follow_count": "0",
    //       "total_value": 12,
    //       "nickname": "76565475",
    //       "platform_account": {
    //         "id": 81,
    //         "org_id": 2,
    //         "avatar": "https://bailing-1305744786.cos.ap-nanjing.myqcloud.com/upload/platform/avatar/20241219/728258473497747456.jpg",
    //         "nickname": "方云舟1",
    //         "status": 1,
    //         "source": "bilibili",
    //         "status_txt": "在线",
    //         "source_txt": "哔哩哔哩",
    //         "platform": {
    //           "key": "bilibili",
    //           "value": "哔哩哔哩",
    //           "image": "https://local.kuaijingai.com/public_web/static/images/workAi/platform/bilibili.png",
    //           "login_url": " ",
    //           "listen_url": "",
    //           "home_url": "https://www.bilibili.com",
    //           "comment_url": "https://member.bilibili.com/platform/comment/article",
    //           "min_upload_number": 0,
    //           "max_upload_number": 0,
    //           "max_upload_tip": "",
    //           "is_scan_authorize": true,
    //           "developing": 0
    //         }
    //       }
    //     },
    //     {
    //       "account_id": 81,
    //       "platform": "bilibili",
    //       "total_plat_count": "0",
    //       "total_like_count": "0",
    //       "total_comment_count": "0",
    //       "total_share_count": "0",
    //       "total_collect_count": "1",
    //       "total_follow_count": "0",
    //       "total_value": 12,
    //       "nickname": "123532",
    //       "platform_account": {
    //         "id": 81,
    //         "org_id": 2,
    //         "avatar": "https://bailing-1305744786.cos.ap-nanjing.myqcloud.com/upload/platform/avatar/20241219/728258473497747456.jpg",
    //         "nickname": "方云舟1",
    //         "status": 1,
    //         "source": "bilibili",
    //         "status_txt": "在线",
    //         "source_txt": "哔哩哔哩",
    //         "platform": {
    //           "key": "bilibili",
    //           "value": "哔哩哔哩",
    //           "image": "https://local.kuaijingai.com/public_web/static/images/workAi/platform/bilibili.png",
    //           "login_url": " ",
    //           "listen_url": "",
    //           "home_url": "https://www.bilibili.com",
    //           "comment_url": "https://member.bilibili.com/platform/comment/article",
    //           "min_upload_number": 0,
    //           "max_upload_number": 0,
    //           "max_upload_tip": "",
    //           "is_scan_authorize": true,
    //           "developing": 0
    //         }
    //       }
    //     },
    //     {
    //       "account_id": 81,
    //       "platform": "bilibili",
    //       "total_plat_count": "0",
    //       "total_like_count": "0",
    //       "total_comment_count": "0",
    //       "total_share_count": "0",
    //       "total_collect_count": "1",
    //       "total_follow_count": "0",
    //       "total_value": 12,
    //       "nickname": "7655575",
    //       "platform_account": {
    //         "id": 81,
    //         "org_id": 2,
    //         "avatar": "https://bailing-1305744786.cos.ap-nanjing.myqcloud.com/upload/platform/avatar/20241219/728258473497747456.jpg",
    //         "nickname": "方云舟1",
    //         "status": 1,
    //         "source": "bilibili",
    //         "status_txt": "在线",
    //         "source_txt": "哔哩哔哩",
    //         "platform": {
    //           "key": "bilibili",
    //           "value": "哔哩哔哩",
    //           "image": "https://local.kuaijingai.com/public_web/static/images/workAi/platform/bilibili.png",
    //           "login_url": " ",
    //           "listen_url": "",
    //           "home_url": "https://www.bilibili.com",
    //           "comment_url": "https://member.bilibili.com/platform/comment/article",
    //           "min_upload_number": 0,
    //           "max_upload_number": 0,
    //           "max_upload_tip": "",
    //           "is_scan_authorize": true,
    //           "developing": 0
    //         }
    //       }
    //     },
    //     {
    //       "account_id": 81,
    //       "platform": "bilibili",
    //       "total_plat_count": "0",
    //       "total_like_count": "0",
    //       "total_comment_count": "0",
    //       "total_share_count": "0",
    //       "total_collect_count": "1",
    //       "total_follow_count": "0",
    //       "total_value": 12,
    //       "nickname": "7654475",
    //       "platform_account": {
    //         "id": 81,
    //         "org_id": 2,
    //         "avatar": "https://bailing-1305744786.cos.ap-nanjing.myqcloud.com/upload/platform/avatar/20241219/728258473497747456.jpg",
    //         "nickname": "方云舟1",
    //         "status": 1,
    //         "source": "bilibili",
    //         "status_txt": "在线",
    //         "source_txt": "哔哩哔哩",
    //         "platform": {
    //           "key": "bilibili",
    //           "value": "哔哩哔哩",
    //           "image": "https://local.kuaijingai.com/public_web/static/images/workAi/platform/bilibili.png",
    //           "login_url": " ",
    //           "listen_url": "",
    //           "home_url": "https://www.bilibili.com",
    //           "comment_url": "https://member.bilibili.com/platform/comment/article",
    //           "min_upload_number": 0,
    //           "max_upload_number": 0,
    //           "max_upload_tip": "",
    //           "is_scan_authorize": true,
    //           "developing": 0
    //         }
    //       }
    //     },
    //     {
    //       "account_id": 81,
    //       "platform": "bilibili",
    //       "total_plat_count": "0",
    //       "total_like_count": "0",
    //       "total_comment_count": "0",
    //       "total_share_count": "0",
    //       "total_collect_count": "1",
    //       "total_follow_count": "0",
    //       "total_value": 12,
    //       "nickname": "76123575",
    //       "platform_account": {
    //         "id": 81,
    //         "org_id": 2,
    //         "avatar": "https://bailing-1305744786.cos.ap-nanjing.myqcloud.com/upload/platform/avatar/20241219/728258473497747456.jpg",
    //         "nickname": "方云舟1",
    //         "status": 1,
    //         "source": "bilibili",
    //         "status_txt": "在线",
    //         "source_txt": "哔哩哔哩",
    //         "platform": {
    //           "key": "bilibili",
    //           "value": "哔哩哔哩",
    //           "image": "https://local.kuaijingai.com/public_web/static/images/workAi/platform/bilibili.png",
    //           "login_url": " ",
    //           "listen_url": "",
    //           "home_url": "https://www.bilibili.com",
    //           "comment_url": "https://member.bilibili.com/platform/comment/article",
    //           "min_upload_number": 0,
    //           "max_upload_number": 0,
    //           "max_upload_tip": "",
    //           "is_scan_authorize": true,
    //           "developing": 0
    //         }
    //       }
    //     },
    //     {
    //       "account_id": 81,
    //       "platform": "bilibili",
    //       "total_plat_count": "0",
    //       "total_like_count": "0",
    //       "total_comment_count": "0",
    //       "total_share_count": "0",
    //       "total_collect_count": "1",
    //       "total_follow_count": "0",
    //       "total_value": 12,
    //       "nickname": "54",
    //       "platform_account": {
    //         "id": 81,
    //         "org_id": 2,
    //         "avatar": "https://bailing-1305744786.cos.ap-nanjing.myqcloud.com/upload/platform/avatar/20241219/728258473497747456.jpg",
    //         "nickname": "方云舟1",
    //         "status": 1,
    //         "source": "bilibili",
    //         "status_txt": "在线",
    //         "source_txt": "哔哩哔哩",
    //         "platform": {
    //           "key": "bilibili",
    //           "value": "哔哩哔哩",
    //           "image": "https://local.kuaijingai.com/public_web/static/images/workAi/platform/bilibili.png",
    //           "login_url": " ",
    //           "listen_url": "",
    //           "home_url": "https://www.bilibili.com",
    //           "comment_url": "https://member.bilibili.com/platform/comment/article",
    //           "min_upload_number": 0,
    //           "max_upload_number": 0,
    //           "max_upload_tip": "",
    //           "is_scan_authorize": true,
    //           "developing": 0
    //         }
    //       }
    //     },
    //     {
    //       "account_id": 81,
    //       "platform": "bilibili",
    //       "total_plat_count": "0",
    //       "total_like_count": "0",
    //       "total_comment_count": "0",
    //       "total_share_count": "0",
    //       "total_collect_count": "1",
    //       "total_follow_count": "0",
    //       "total_value": 12,
    //       "nickname": "76572135",
    //       "platform_account": {
    //         "id": 81,
    //         "org_id": 2,
    //         "avatar": "https://bailing-1305744786.cos.ap-nanjing.myqcloud.com/upload/platform/avatar/20241219/728258473497747456.jpg",
    //         "nickname": "方云舟1",
    //         "status": 1,
    //         "source": "bilibili",
    //         "status_txt": "在线",
    //         "source_txt": "哔哩哔哩",
    //         "platform": {
    //           "key": "bilibili",
    //           "value": "哔哩哔哩",
    //           "image": "https://local.kuaijingai.com/public_web/static/images/workAi/platform/bilibili.png",
    //           "login_url": " ",
    //           "listen_url": "",
    //           "home_url": "https://www.bilibili.com",
    //           "comment_url": "https://member.bilibili.com/platform/comment/article",
    //           "min_upload_number": 0,
    //           "max_upload_number": 0,
    //           "max_upload_tip": "",
    //           "is_scan_authorize": true,
    //           "developing": 0
    //         }
    //       }
    //     },
    //     {
    //       "account_id": 81,
    //       "platform": "bilibili",
    //       "total_plat_count": "0",
    //       "total_like_count": "0",
    //       "total_comment_count": "0",
    //       "total_share_count": "0",
    //       "total_collect_count": "1",
    //       "total_follow_count": "0",
    //       "total_value": 0,
    //       "nickname": "534",
    //       "platform_account": {
    //         "id": 81,
    //         "org_id": 2,
    //         "avatar": "https://bailing-1305744786.cos.ap-nanjing.myqcloud.com/upload/platform/avatar/20241219/728258473497747456.jpg",
    //         "nickname": "方云舟1",
    //         "status": 1,
    //         "source": "bilibili",
    //         "status_txt": "在线",
    //         "source_txt": "哔哩哔哩",
    //         "platform": {
    //           "key": "bilibili",
    //           "value": "哔哩哔哩",
    //           "image": "https://local.kuaijingai.com/public_web/static/images/workAi/platform/bilibili.png",
    //           "login_url": " ",
    //           "listen_url": "",
    //           "home_url": "https://www.bilibili.com",
    //           "comment_url": "https://member.bilibili.com/platform/comment/article",
    //           "min_upload_number": 0,
    //           "max_upload_number": 0,
    //           "max_upload_tip": "",
    //           "is_scan_authorize": true,
    //           "developing": 0
    //         }
    //       }
    //     }
    //     ,
    //     {
    //       "account_id": 81,
    //       "platform": "bilibili",
    //       "total_plat_count": "0",
    //       "total_like_count": "0",
    //       "total_comment_count": "0",
    //       "total_share_count": "0",
    //       "total_collect_count": "1",
    //       "total_follow_count": "0",
    //       "total_value": 0,
    //       "nickname": "534",
    //       "platform_account": {
    //         "id": 81,
    //         "org_id": 2,
    //         "avatar": "https://bailing-1305744786.cos.ap-nanjing.myqcloud.com/upload/platform/avatar/20241219/728258473497747456.jpg",
    //         "nickname": "方云舟1",
    //         "status": 1,
    //         "source": "bilibili",
    //         "status_txt": "在线",
    //         "source_txt": "哔哩哔哩",
    //         "platform": {
    //           "key": "bilibili",
    //           "value": "哔哩哔哩",
    //           "image": "https://local.kuaijingai.com/public_web/static/images/workAi/platform/bilibili.png",
    //           "login_url": " ",
    //           "listen_url": "",
    //           "home_url": "https://www.bilibili.com",
    //           "comment_url": "https://member.bilibili.com/platform/comment/article",
    //           "min_upload_number": 0,
    //           "max_upload_number": 0,
    //           "max_upload_tip": "",
    //           "is_scan_authorize": true,
    //           "developing": 0
    //         }
    //       }
    //     },
    //     {
    //       "account_id": 81,
    //       "platform": "bilibili",
    //       "total_plat_count": "0",
    //       "total_like_count": "0",
    //       "total_comment_count": "0",
    //       "total_share_count": "0",
    //       "total_collect_count": "1",
    //       "total_follow_count": "0",
    //       "total_value": 0,
    //       "nickname": "紫云紫云紫云紫云紫云紫云紫云",
    //       "platform_account": {
    //         "id": 81,
    //         "org_id": 2,
    //         "avatar": "https://bailing-1305744786.cos.ap-nanjing.myqcloud.com/upload/platform/avatar/20241219/728258473497747456.jpg",
    //         "nickname": "方云舟1",
    //         "status": 1,
    //         "source": "bilibili",
    //         "status_txt": "在线",
    //         "source_txt": "哔哩哔哩",
    //         "platform": {
    //           "key": "bilibili",
    //           "value": "哔哩哔哩",
    //           "image": "https://local.kuaijingai.com/public_web/static/images/workAi/platform/bilibili.png",
    //           "login_url": " ",
    //           "listen_url": "",
    //           "home_url": "https://www.bilibili.com",
    //           "comment_url": "https://member.bilibili.com/platform/comment/article",
    //           "min_upload_number": 0,
    //           "max_upload_number": 0,
    //           "max_upload_tip": "",
    //           "is_scan_authorize": true,
    //           "developing": 0
    //         }
    //       }
    //     }
    //   ]
        if (!chart.chart5) {
            chart.chart5 = new Chart({
                container: "excellentPerformingAccount",
                autoFit: true,
                width:600,
                paddingLeft: 190,
            });
        }
        function medal(datum, ranking) {
            let data = accountVideoTop.value.find((item, index) => index === ranking);
            const { document } = chart.chart5.getContext().canvas;
            const group = document.createElement('g', {});
            const size = 14;

            // 创建图片元素
            const icon = document.createElement('image', {
                style: {
                    src: data.platform_account.platform.image,
                    width: 25,
                    height: 25,
                    transform: `translate(-180, -10)`, // 调整图片位置到文字右侧
                },
            });

            let displayText = datum;
            if (datum.length > 10) {
                displayText = datum.slice(0, 10) + '...';
            }

                  // 创建文字元素
            const label = document.createElement('text', {
                style: {
                    text: displayText,
                    fontSize: 14,
                    textAlign: 'left', // 文字右对齐
                    transform: `translate(-150, 10)`, // 调整文字位置
                },
            });
            group.appendChild(icon);
            group.appendChild(label);

            return group;
        }
        chart.chart5.clear()
        chart.chart5
        .interval()
        .coordinate({ transform: [{ type: 'transpose' }] })
        .data(accountVideoTop.value)
        .encode('x', 'nickname')
        .encode('y', 'total_value')
        .encode('size', 6) 
        .axis({
            x: {
                labelFormatter: (datum, index) => medal(datum,index),
                    label: {
                        // 设置 label 与图表的距离，正值表示向下偏移，负值表示向上偏移
                        formatter: (datum, index) => medal(datum, index),
                    },
                    title:false,
                    tickLine: {
                        visible: false 
                    }
            },
            y: false,
        })
        .style('radiusTopLeft', 10)
        .style('radiusTopRight', 10)
        .tooltip((data) => ({
                name: data.nickname,
                value: `${data.total_value}`,
            }))
        chart.chart5.render();
    })
}

const dataDateClick=({key})=>{
    dataDateKey.value = key
    orderBys.value= {}
}

const dataDateTimeClick=({key})=>{
    dataDateTimeKey.value = key
    switch (key) {  
        case 0:  
        startDate.value = endDate.subtract(7, 'day'); 

        dataDateTimDay.value =  [startDate.value, endDate];
        dataDateKeyChange(dataDateKey.value)
            break;  
        case 1:  
        startDate.value = endDate.subtract(30, 'day'); 

        dataDateTimDay.value =  [startDate.value, endDate];
        dataDateKeyChange(dataDateKey.value)
            break;  
        default:  
        startDate.value = endDate.subtract(90, 'day'); 

        dataDateTimDay.value =  [startDate.value, endDate];
        dataDateKeyChange(dataDateKey.value)
            break;  
    }

}

const dataDateChange=(dayjs, dateString)=>{
    if(dateString[0].length){
        dataDateTimeKey.value = 2
    }else{
        dataDateTimeKey.value = 0
        startDate.value = endDate.subtract(7, 'day'); 
        dataDateTimDay.value =  [startDate.value, endDate];
    }
    dataDateKeyChange(dataDateKey.value)
}

const startTime=ref('')
const endTime=ref('')

watch(
    ()=>dataDateTimDay.value,
    (val)=>{
        if(val.length){
            startTime.value = val[0].format('YYYY-MM-DD')
            endTime.value = val[1].format('YYYY-MM-DD')
        }
      
    }
)


const detailText=ref('')
const dataDetailTotal =ref(0)
const detailSourceLoading=ref(false)
const total=ref(0)
const page=ref(1)
const pageSize=ref(10)
const orderBys =ref({})
const pagination = computed(() => ({
  total: total.value,
  current: page.value,
  pageSize: pageSize.value,
  showSizeChanger: true,
}));
const handleTableChange = (pager, filters, sorter, extra) => {
    page.value = pager.current;
    pageSize.value = pager.pageSize;
    if(!sorter.order){
        orderBys.value ={}
    }else{
        orderBys.value = {
          [sorter.field]: sorter.order == 'ascend' ? 'asc':'desc',
        };
    }

    dataDateKeyChange(dataDateKey.value)
};
const onDetailSearch=()=>{
    dataDateKeyChange(dataDateKey.value)
}



watch(
    ()=>dataDateKey.value,
    (val)=>{
        dataDateTimeKey.value =0
        dataDateKeyChange(val)
    }
)

const  dataDateKeyChange =(key)=>{
    switch (key) {  
        case 1:  
        // 按日期
        detailColumns.value = [
            {
                title: '日期',
                dataIndex: 'day_time',
                sorter: {
                    compare: (a, b) => a.day_time - b.day_time,
                },
            },
            {
                title: '剪辑成片数',
                dataIndex: 'cutProductCount',
                sorter: {
                    compare: (a, b) => a.cutProductCount - b.cutProductCount,
                },
            },
            {
                title: '发布视频数',
                dataIndex: 'total_release_count',
                sorter: {
                    compare: (a, b) => a.total_release_count - b.total_release_count,
                },
            },
            {
                title: '播放量',
                dataIndex: 'total_plat_count',
                sorter: {
                    compare: (a, b) => a.total_plat_count - b.total_plat_count,
                },
            },
            {
                title: '评论数',
                dataIndex: 'total_comment_count',
                sorter: {
                    compare: (a, b) => a.total_comment_count - b.total_comment_count,
                },
            },
            {
                title: '分享数',
                dataIndex: 'total_share_count',
                sorter: {
                    compare: (a, b) => a.total_share_count - b.total_share_count,
                },
            },
        ]
        getDataDate()
            break;  
        case 2:  
        // 按视频
        detailColumns.value = [
            {
                title: '视频ID',
                dataIndex: 'video_id',
                sorter: {
                    compare: (a, b) => a.video_id - b.video_id,
                },
                width: 400
            },
            {
                title: '发布平台/账号',
                dataIndex: 'source_txt',
                sorter: {
                    compare: (a, b) => a.source_txt - b.source_txt,
                },
                
            },
            {
                title: '播放量',
                dataIndex: 'total_plat_count',
                sorter: {
                    compare: (a, b) => a.total_plat_count - b.total_plat_count,
                },
            },
            {
                title: '点赞数',
                dataIndex: 'total_like_count',
                sorter: {
                    compare: (a, b) => a.total_like_count - b.total_like_count,
                },
            },
            {
                title: '评论数',
                dataIndex: 'total_comment_count',
                sorter: {
                    compare: (a, b) => a.total_comment_count - b.total_comment_count,
                },
            },
            {
                title: '分享数',
                dataIndex: 'total_share_count',
                sorter: {
                    compare: (a, b) => a.total_share_count - b.total_share_count,
                },
            },
        ]
        getDataRelease()
            break; 
        case 3:  
        // 按账号
        detailColumns.value = [
            {
                title: '平台账号',
                dataIndex: 'source_txt',
                sorter: {
                    compare: (a, b) => a.source_txt - b.source_txt,
                },
            },
            {
                title: '粉丝数',
                dataIndex: 'total_fans_count',
                sorter: {
                    compare: (a, b) => a.total_fans_count - b.total_fans_count,
                },
            },
            {
                title: '分布视频数',
                dataIndex: 'total_release_count',
                sorter: {
                    compare: (a, b) => a.total_release_count - b.total_release_count,
                },
            },
            {
                title: '播放量',
                dataIndex: 'total_plat_count',
                sorter: {
                    compare: (a, b) => a.total_plat_count - b.total_plat_count,
                },
            },
            {
                title: '点赞数',
                dataIndex: 'total_like_count',
                sorter: {
                    compare: (a, b) => a.total_like_count - b.total_like_count,
                },
            },
            {
                title: '评论数',
                dataIndex: 'total_comment_count',
                sorter: {
                    compare: (a, b) => a.total_comment_count - b.total_comment_count,
                },
            },
            {
                title: '分享数',
                dataIndex: 'total_share_count',
                sorter: {
                    compare: (a, b) => a.total_share_count - b.total_share_count,
                },
            },
        ]
        getDataAccount()
            break;  
        case 4: 
        // 按平台
        detailColumns.value = [
            {
                title: '发布平台',
                dataIndex: 'source_txt',
                sorter: {
                    compare: (a, b) => a.source_txt - b.source_txt,
                },
            },
            {
                title: '账号数',
                dataIndex: 'total_account_count',
                sorter: {
                    compare: (a, b) => a.total_account_count - b.total_account_count,
                },
            },
            {
                title: '粉丝数',
                dataIndex: 'total_fans_count',
                sorter: {
                    compare: (a, b) => a.total_fans_count - b.total_fans_count,
                },
            },
            {
                title: '发布数',
                dataIndex: 'total_follow_count',
                sorter: {
                    compare: (a, b) => a.total_follow_count - b.total_follow_count,
                },
            },
            {
                title: '播放量',
                dataIndex: 'total_plat_count',
                sorter: {
                    compare: (a, b) => a.total_plat_count - b.total_plat_count,
                },
            },
            {
                title: '点赞数',
                dataIndex: 'total_like_count',
                sorter: {
                    compare: (a, b) => a.total_like_count - b.total_like_count,
                },
            },
            {
                title: '评论数',
                dataIndex: 'total_comment_count',
                sorter: {
                    compare: (a, b) => a.total_comment_count - b.total_comment_count,
                },
            },
            {
                title: '分享数',
                dataIndex: 'total_share_count',
                sorter: {
                    compare: (a, b) => a.total_share_count - b.total_share_count,
                },
            },
        ]
        getDataPlatform()
        break;  
    }
}

// 按日期
const getDataDate=()=>{
    let params ={
        name:accountNum.value,
        platform: accountData.value?.key || '',
        orderBys: orderBys.value,
        startTime:'',
        endTime:''
       
    }
    if(dataDateTimDay.value.length){
        params.startTime= dataDateTimDay.value[0].format('YYYY-MM-DD'),
        params.endTime= dataDateTimDay.value[1].format('YYYY-MM-DD')
    }
    detailSourceLoading.value = true
    request.get('/work_ai','/user/video/data/date',params).then((res)=>{
        console.log(res);
        dataDetailSource.value = res.result.data
    //     dataDetailSource.value = [
    //     {
    //       "day_time": "2025-03-04 00:00:00",
    //       "total_plat_count": "32",
    //       "total_like_count": "0",
    //       "total_comment_count": "0",
    //       "total_share_count": "0",
    //       "total_collect_count": "0",
    //       "total_follow_count": "0",
    //       "total_release_count": 2,
    //       "cutProductCount": 0
    //     },
    //     {
    //       "day_time": "2025-01-12 00:00:00",
    //       "total_plat_count": "3",
    //       "total_like_count": "0",
    //       "total_comment_count": "0",
    //       "total_share_count": "0",
    //       "total_collect_count": "0",
    //       "total_follow_count": "0",
    //       "total_release_count": 3,
    //       "cutProductCount": 0
    //     },
    //     {
    //       "day_time": "2024-12-19 00:00:00",
    //       "total_plat_count": "1",
    //       "total_like_count": "1",
    //       "total_comment_count": "0",
    //       "total_share_count": "0",
    //       "total_collect_count": "0",
    //       "total_follow_count": "0",
    //       "total_release_count": 1,
    //       "cutProductCount": 0
    //     },
    //     {
    //       "day_time": "2024-12-02 00:00:00",
    //       "total_plat_count": "6",
    //       "total_like_count": "0",
    //       "total_comment_count": "0",
    //       "total_share_count": "0",
    //       "total_collect_count": "0",
    //       "total_follow_count": "0",
    //       "total_release_count": 4,
    //       "cutProductCount": 21
    //     }
    //   ]

        dataDetailTotal.value = res.result.total
        detailSourceLoading.value = false
    }).catch(()=>{
        detailSourceLoading.value = false
    })
}
getDataDate()
// 按视频
const getDataRelease=()=>{
    let params ={
        name:accountNum.value,
        platform: accountData.value.key || '',
        orderBys: orderBys.value,
        startTime: dataDateTimDay.value[0].format('YYYY-MM-DD'),
        endTime: dataDateTimDay.value[1].format('YYYY-MM-DD')
    }
    detailSourceLoading.value = true
    request.get('/work_ai','/user/video/data/release',params).then((res)=>{
        console.log(res);
        dataDetailSource.value=res.result.data
        // dataDetailSource.value=[
        // {
        //   "film_multimedia_relation_id": 5007,
        //   "account_id": 126,
        //   "total_plat_count": "2",
        //   "total_like_count": "0",
        //   "total_comment_count": "0",
        //   "total_share_count": "0",
        //   "total_collect_count": "0",
        //   "total_follow_count": "0",
        //   "total_release_count": 1,
        //   "film_video": {
        //     "id": 5007,
        //     "title": "",
        //     "caption": "",
        //     "hashtag_name": null,
        //     "merchant_folder_statck_multimedia_id": 119795,
        //     "release_status_text": "-",
        //     "download_text": "-",
        //     "visibility_type_text": "-",
        //     "platform_check_status_text": "",
        //     "multimedia": {
        //       "id": 119795,
        //       "org_id": 2,
        //       "user_id": 2,
        //       "merchant_folder_statck_id": 1843,
        //       "material_name": "混剪项目2025.2.28 16:32:12_57962.mp4",
        //       "material_extension": "mp4",
        //       "width": 1080,
        //       "height": 1920,
        //       "material_url": "https://shotstack.oss-cn-hangzhou.aliyuncs.com/upload/shotstack/video/2/2/1740967792_21772_3.mp4",
        //       "cover_url": "https://shotstack.oss-cn-hangzhou.aliyuncs.com/upload/shotstack/video/2/2/ice-generated/9b5c2750f7d471ef8613f6e6c6486302/covers/b878b1ffbd954ad4a2cb0576bcbda48b-cover.png",
        //       "material_size": 1817451,
        //       "material_duration": 7000
        //     },
        //     "filmrelease": null
        //   },
        //   "platform_account": {
        //     "id": 126,
        //     "org_id": 2,
        //     "avatar": "https://bailing-1305744786.cos.ap-nanjing.myqcloud.com/upload/platform/avatar/20250305/755782983755718656.png",
        //     "nickname": "紫云录",
        //     "status": 0,
        //     "source": "weixinshipinhao",
        //     "status_txt": "离线",
        //     "source_txt": "视频号",
        //     "platform": {
        //       "key": "weixinshipinhao",
        //       "value": "视频号",
        //       "image": "https://local.kuaijingai.com/public_web/static/images/workAi/platform/shipinghao.png",
        //       "login_url": "https://channels.weixin.qq.com/login.html",
        //       "listen_url": "https://channels.weixin.qq.com/cgi-bin/mmfinderassistant-bin/vip/get-user-member-service-status",
        //       "org_listen_url": "",
        //       "home_url": "https://channels.weixin.qq.com/platform",
        //       "comment_url": "https://channels.weixin.qq.com/platform/comment",
        //       "min_upload_number": 0,
        //       "max_upload_number": 18,
        //       "max_upload_tip": "发布图片动态，可上传最多18张图片，单张不超过20MB，支持常见图片格式。",
        //       "is_scan_authorize": false,
        //       "article_type": "short",
        //       "developing": 0
        //     }
        //   }
        // },
        // {
        //   "film_multimedia_relation_id": 5007,
        //   "account_id": 126,
        //   "total_plat_count": "2",
        //   "total_like_count": "0",
        //   "total_comment_count": "0",
        //   "total_share_count": "0",
        //   "total_collect_count": "0",
        //   "total_follow_count": "0",
        //   "total_release_count": 1,
        //   "film_video": {
        //     "id": 5007,
        //     "title": "",
        //     "caption": "",
        //     "hashtag_name": null,
        //     "merchant_folder_statck_multimedia_id": 119795,
        //     "release_status_text": "-",
        //     "download_text": "-",
        //     "visibility_type_text": "-",
        //     "platform_check_status_text": "",
        //     "multimedia": {
        //       "id": 119795,
        //       "org_id": 2,
        //       "user_id": 2,
        //       "merchant_folder_statck_id": 1843,
        //       "material_name": "混剪项目2025.2.28 16:32:12_57962.mp4",
        //       "material_extension": "mp4",
        //       "width": 1080,
        //       "height": 1920,
        //       "material_url": "https://shotstack.oss-cn-hangzhou.aliyuncs.com/upload/shotstack/video/2/2/1740967792_21772_3.mp4",
        //       "cover_url": "https://shotstack.oss-cn-hangzhou.aliyuncs.com/upload/shotstack/video/2/2/ice-generated/9b5c2750f7d471ef8613f6e6c6486302/covers/b878b1ffbd954ad4a2cb0576bcbda48b-cover.png",
        //       "material_size": 1817451,
        //       "material_duration": 7000
        //     },
        //     "filmrelease": null
        //   },
        //   "platform_account": {
        //     "id": 126,
        //     "org_id": 2,
        //     "avatar": "https://bailing-1305744786.cos.ap-nanjing.myqcloud.com/upload/platform/avatar/20250305/755782983755718656.png",
        //     "nickname": "紫云录",
        //     "status": 0,
        //     "source": "weixinshipinhao",
        //     "status_txt": "离线",
        //     "source_txt": "视频号",
        //     "platform": {
        //       "key": "weixinshipinhao",
        //       "value": "视频号",
        //       "image": "https://local.kuaijingai.com/public_web/static/images/workAi/platform/shipinghao.png",
        //       "login_url": "https://channels.weixin.qq.com/login.html",
        //       "listen_url": "https://channels.weixin.qq.com/cgi-bin/mmfinderassistant-bin/vip/get-user-member-service-status",
        //       "org_listen_url": "",
        //       "home_url": "https://channels.weixin.qq.com/platform",
        //       "comment_url": "https://channels.weixin.qq.com/platform/comment",
        //       "min_upload_number": 0,
        //       "max_upload_number": 18,
        //       "max_upload_tip": "发布图片动态，可上传最多18张图片，单张不超过20MB，支持常见图片格式。",
        //       "is_scan_authorize": false,
        //       "article_type": "short",
        //       "developing": 0
        //     }
        //   }
        // },
        // ]
        dataDetailTotal.value = res.result.total
        detailSourceLoading.value = false
    }).catch(()=>{
        detailSourceLoading.value = false
    })
}
// 按账号
const getDataAccount=()=>{
    let params ={
        name:accountNum.value,
        platform: accountData.value.key || '',
        orderBys: orderBys.value,
    }
    detailSourceLoading.value = true
    request.get('/work_ai','/user/video/data/account',params).then((res)=>{
        console.log(res);
        dataDetailSource.value=res.result.data
        // dataDetailSource.value= [
        // {
        //   "org_id": 2,
        //   "account_id": 3,
        //   "total_plat_count": 1208,
        //   "total_like_count": 13,
        //   "total_comment_count": 1,
        //   "total_share_count": 7,
        //   "total_collect_count": 2,
        //   "total_follow_count": 0,
        //   "total_fans_count": 38,
        //   "total_release_count": 101,
        //   "platform_account": {
        //     "id": 3,
        //     "org_id": 2,
        //     "avatar": "https://bailing-1305744786.cos.ap-nanjing.myqcloud.com/upload/platform/avatar/20250315/759416109518495744.jpg",
        //     "nickname": "幻梦",
        //     "status": 1,
        //     "source": "douyin",
        //     "status_txt": "在线",
        //     "source_txt": "抖音",
        //     "platform": {
        //       "key": "douyin",
        //       "value": "抖音",
        //       "image": "https://local.kuaijingai.com/public_web/static/images/workAi/platform/douyin.png",
        //       "login_url": "https://creator.douyin.com",
        //       "listen_url": "https://creator.douyin.com/aweme/v1/creator/im/user_token/v2/",
        //       "org_listen_url": "https://creator.douyin.com/web/api/v1/im/token/",
        //       "home_url": "https://creator.douyin.com/creator-micro/home",
        //       "comment_url": "https://creator.douyin.com/creator-micro/data/following/comment",
        //       "min_upload_number": 1,
        //       "max_upload_number": 35,
        //       "max_upload_tip": "最多支持上传35张图片，图片格式不支持gif格式",
        //       "is_scan_authorize": false,
        //       "article_type": "short",
        //       "developing": 0
        //     }
        // }
        // },
        // {
        //   "org_id": 2,
        //   "account_id": 3,
        //   "total_plat_count": 1208,
        //   "total_like_count": 13,
        //   "total_comment_count": 1,
        //   "total_share_count": 7,
        //   "total_collect_count": 2,
        //   "total_follow_count": 0,
        //   "total_fans_count": 38,
        //   "total_release_count": 101,
        //   "platform_account": {
        //     "id": 3,
        //     "org_id": 2,
        //     "avatar": "https://bailing-1305744786.cos.ap-nanjing.myqcloud.com/upload/platform/avatar/20250313/758621315422674944.jpg",
        //     "nickname": "幻梦",
        //     "status": 1,
        //     "source": "douyin",
        //     "status_txt": "在线",
        //     "source_txt": "抖音",
        //     "platform": {
        //       "key": "douyin",
        //       "value": "抖音",
        //       "image": "https://local.kuaijingai.com/public_web/static/images/workAi/platform/douyin.png",
        //       "login_url": "https://creator.douyin.com",
        //       "listen_url": "https://creator.douyin.com/aweme/v1/creator/im/user_token/v2/",
        //       "org_listen_url": "https://creator.douyin.com/web/api/v1/im/token/",
        //       "home_url": "https://creator.douyin.com/creator-micro/home",
        //       "comment_url": "https://creator.douyin.com/creator-micro/data/following/comment",
        //       "min_upload_number": 1,
        //       "max_upload_number": 35,
        //       "max_upload_tip": "最多支持上传35张图片，图片格式不支持gif格式",
        //       "is_scan_authorize": false,
        //       "article_type": "short",
        //       "developing": 0
        //     }
        //   }
        // }
        // ]
        dataDetailTotal.value = res.result.total
        detailSourceLoading.value = false
    }).catch(()=>{
        detailSourceLoading.value = false
    })
}
// 按平台
const getDataPlatform=()=>{
    let params ={
        name:accountNum.value,
        platform: accountData.value.key || '',
    }
    detailSourceLoading.value = true
    request.get('/work_ai','/user/video/data/platform',params).then((res)=>{
        console.log(res);
        dataDetailSource.value=res.result.data
    //     dataDetailSource.value= [
    //     {
    //     "org_id": 2,
    //     "account_id": 3,
    //     "platform": "douyin",
    //     "total_plat_count": "1208",
    //     "total_like_count": "13",
    //     "total_comment_count": "1",
    //     "total_share_count": "7",
    //     "total_collect_count": "2",
    //     "total_follow_count": "0",
    //     "total_fans_count": "38",
    //     "total_release_count": "101",
    //     "total_account_count":100,
    //     "platformInfo": {
    //       "key": "douyin",
    //       "value": "抖音",
    //       "image": "https://local.kuaijingai.com/public_web/static/images/workAi/platform/douyin.png",
    //       "login_url": "https://creator.douyin.com",
    //       "listen_url": "https://creator.douyin.com/aweme/v1/creator/im/user_token/v2/",
    //       "org_listen_url": "https://creator.douyin.com/web/api/v1/im/token/",
    //       "home_url": "https://creator.douyin.com/creator-micro/home",
    //       "comment_url": "https://creator.douyin.com/creator-micro/data/following/comment",
    //       "min_upload_number": 1,
    //       "max_upload_number": 35,
    //       "max_upload_tip": "最多支持上传35张图片，图片格式不支持gif格式",
    //       "is_scan_authorize": false,
    //       "article_type": "short",
    //       "developing": 0
    //     }
    //   },
    //   {
    //     "org_id": 2,
    //     "account_id": 3,
    //     "platform": "douyin",
    //     "total_plat_count": "1208",
    //     "total_like_count": "13",
    //     "total_comment_count": "1",
    //     "total_share_count": "7",
    //     "total_collect_count": "2",
    //     "total_follow_count": "0",
    //     "total_fans_count": "38",
    //     "total_release_count": "101",
    //     "platformInfo": {
    //       "key": "douyin",
    //       "value": "抖音",
    //       "image": "https://local.kuaijingai.com/public_web/static/images/workAi/platform/douyin.png",
    //       "login_url": "https://creator.douyin.com",
    //       "listen_url": "https://creator.douyin.com/aweme/v1/creator/im/user_token/v2/",
    //       "org_listen_url": "https://creator.douyin.com/web/api/v1/im/token/",
    //       "home_url": "https://creator.douyin.com/creator-micro/home",
    //       "comment_url": "https://creator.douyin.com/creator-micro/data/following/comment",
    //       "min_upload_number": 1,
    //       "max_upload_number": 35,
    //       "max_upload_tip": "最多支持上传35张图片，图片格式不支持gif格式",
    //       "is_scan_authorize": false,
    //       "article_type": "short",
    //       "developing": 0
    //     }
    //   },
    //     ]

        dataDetailTotal.value = res.result.total

        detailSourceLoading.value = false
    }).catch(()=>{
        detailSourceLoading.value = false
    })
}

const showDate = computed(() => {
    if (dataTrendsAccountDay.value?.[0] && dataTrendsAccountDay.value?.[1]) {
       const date = meowDateDiff(dataTrendsAccountDay.value[0].format('YYYY-MM-DD'), dataTrendsAccountDay.value[1].format('YYYY-MM-DD'))
        return `近${date}日数据`
    } else {
        return ''
    }
    // return dataTrendsAccountDay.value
})
      
onMounted(()=>{
    dataTrendsAccountDay.value =  [startDate.value, endDate];
    accountDayTime.value =  [startDate.value, endDate];
    dataDateTimDay.value =  [startDate.value, endDate];
    getAccountAuthorization()
    getDataNew()
    getFilmVideoTop()
    getAccountVideoTop()
})

onUnmounted(() => {
    if (chart.chart3) {
        chart.chart3.destroy();
    }
    if (chart.chart4) {
        chart.chart4.destroy();
    }
})


</script>

<style lang="less" scoped>

@mg:20px;

.box{
    position: relative;
    width: 100%;
    .top_checkbox{
        position: sticky;
        background-color: #fff;
        top: -10px;
        left: 0;
        z-index: 10;
        padding: 0 10px;
        border-radius: 10px;
        border: 1px solid #f3f3f3;
    }
    .title{
        font-size: 20px;
        font-weight: 700;
        margin-top: 15px;
        margin-bottom: 10px;
    }
    .text-size{
        font-size: 18px;
    }

    .data-top-list{
        // border:1px solid #5858580d;
        border-radius:10px;
        padding-top: 20px;
        // background: #fff;
        height: 100%;
        display: flex;
        gap: 20px;

        .top_list_right{
            width: 15%;
            border-radius: 10px;
            background-color: #fff;
        }


        .top_list_left{
            flex: 1;
            display: flex;
            flex-direction: column;
            background-color: #fff;
            border-radius: 10px;
            .left_top{
            display: flex;
            justify-content: space-between;
            .cart_item {
                flex: 1;
            }
        }

        .left_bottom{
            display: flex;
            justify-content: space-between;
            .cart_item {
                flex: 1;
            }
        }
        }

        .platform-num{
            border-radius: 8px;
            height: 110px;
            display: flex;
            align-content: center;
            justify-content: center;
            background: #fff;
            .content_num_box{
                display: flex;
                justify-content: center;
                align-items: center;
            }

            .content_num_bottom{
                display: flex;
                flex-direction: column;
                justify-content: center;
                width: 120px;
            }

            .content_num_bottom_right{
                width: 200px;
                text-align: right;
                display: flex;
                flex-direction: column;
                justify-content: center;
                margin-right:10px;
            }



            .platform-number{
                font-size: 24px;
                font-weight: 700;
            }
            .platform-text{
                color: #4E5969;
            }
            .platform-img{
                width: 60px;
                height: 60px;
                border-radius: 50%;
                overflow: hidden;
                margin-right: 10px;
            }
        }
    }
    .platform{
        padding: 10px 0;
        .platform-item{
            padding: 5px 15px;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 5px;
            margin-right: 10px;
            border: 1px solid #fff;
            background: #fff;
            cursor: pointer;
            height: 40px;
            border-radius: 10px;
            &.item-border{
                border: 1px solid #1367FF;
            }
            .img-item{
                width: 28px;
                height: 28px;
                border-radius: 50px;
                margin-right: 5px;
            }
        }
    }

    .box-item{
        width: 200px;
        background: #e5e7ff;
        border-radius: 8px;
        margin-right: 10px;
        padding: 10px;
        .added{
            display: inline-block;
            background: #fff;
            border-radius: 20px;
            padding: 2px 10px;
        }
    }

    .critical-data{
        width: 200px; 
        background: #f7f7fa;
        border-radius: 5px;
        overflow: hidden;
        .critical-data-item{
            display: flex;
            flex: 1;
            justify-content: center;
            cursor: pointer;
            height: 32px;
            line-height: 32px;
            &.data-item-bg{
                height: 32px;
                line-height: 32px;
                background: linear-gradient(to right, #00D7FF, #1367FF);
                color: #fff;
                border-radius: 5px;
                transition: all .1s;
            }
        }
    }
    #container {
        width: 100%;
        height: 400px;
    }

    #excellentPerformingAccount {
        width: 100%;
        height: 650px;
        background: #fff;
        overflow: hidden auto;
    }

    .card{
        background: #fff;
        padding: 10px;
        border-radius: 10px;
        padding-left: 20px;
        padding-top: 30px;
    }

    .data_trend{
        padding-bottom: 30px;
        .data_trend_main{
            border: 1px solid #f1f1f1;
        }
    }


    .metric{
        margin: 0 auto;
        display: flex;
        justify-content: space-around;
        align-content: center;
        margin-top: 20px;
        // padding-bottom: 10px;
        .critical-engagement-data{
            width: 600px; 
            // overflow: hidden;
            display: flex;
            justify-content: center;
            .critical-engagement-data-item{
                display: flex;
                justify-content: center;
                cursor: pointer;
                height: 36px;
                line-height: 32px;
                margin-right: 20px;
                font-size: 15px;
                &.data-item-bg{
                    // background-image: linear-gradient(to left, #00D7FF, #1367FF); /* 设置渐变色 */
                    background: #1783ff;
                    -webkit-background-clip: text;
                    -webkit-text-fill-color: transparent;
                    font-weight: bold;
                    &.data-item-bg::after {
                        content: '';
                        position: absolute;
                        right: 0;
                        bottom: 0px;
                        width: 100%;
                        height: 5px;
                        background: #1783ff;
                        // background-image: linear-gradient(to left, #00D7FF, #1367FF); /* 设置渐变色 */
                        border-radius: 0 !important; /* 确保没有圆角，使用 !important 提升优先级 */
                    }
                }
            }
        }
    }

    .video-data-trend{
        margin-top: 20px;
        padding: 0 20px;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        padding-top: 30px;
        padding-left: 28px;
    }

    .video-data{
        display: grid;
        grid-template-columns: repeat(3, 1fr); /* 创建 5 列，每列宽度相等 */
        gap: 10px;
        background: #fff;
        padding: 20px 10px;
        .video-item{
            border: 1px solid #1174FF;
            padding: 10px;
            text-align: center;
            border-radius: 8px;
            height: 110px;
            display: flex;
            align-content: center;
            cursor: pointer;
            .video-item-title{
                font-size: 16px;
                color: #4E5969;
            }
            .video-item-num{
                font-size: 16px;
                font-weight: 700;
            }
            
            .video-item-img{
                width: 50px;
                height: 50px;
                border-radius: 50%;
                overflow: hidden;
            }
        }
    }

    .honourable-mentions{
        font-size: 18px;
        font-weight: 600;
    }

    .engagement-metrics{
        margin-top: 20px;
        text-align: center;
        
    }

    .views-and-comments{
        .comments-title{
            font-weight: 700;
            font-size: 16px;
            margin: 40px 0;
            margin-bottom: 20px;
        }
    }
    .detail-data{
        margin-top: 20px;
        padding-left: 20px;
        .detail-data-select{
            width: 260px; 
            border-radius: 5px;
            overflow: hidden;
            .detail-data-border{
                border:1px solid #e1e1e1;
                border-radius:8px
            }
            .detail-data-item{
                display: flex;
                flex: 1;
                justify-content: center;
                cursor: pointer;
                height: 32px;
                line-height: 32px;
                &.detail-data-bg{
                    height: 32px;
                    line-height: 32px;
                    background: linear-gradient(to right, #00D7FF, #1367FF);
                    color: #fff;
                    border-radius: 5px;
                }
               
            }
        }

        .even-row {
            background-color: #f9f9f9;
        }

        .odd-row {
            background-color: #ffffff;
        }
    }

    .video_box{

        .video_item{
            width: 60px;
            height: 90px;
            border-radius:10px;
            object-fit: cover;
            cursor: pointer;
        }

        .video_date{
            color:#b1aeae
        }
    }
}
</style>
